<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ad;</span>
                <div class="name">hammer-line</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ae;</span>
                <div class="name">hammer-fill</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6af;</span>
                <div class="name">tools-fill</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b0;</span>
                <div class="name">tools-line</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b1;</span>
                <div class="name">markup-line</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b2;</span>
                <div class="name">slice-fill</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b3;</span>
                <div class="name">slice-line</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b4;</span>
                <div class="name">markup-fill</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b5;</span>
                <div class="name">layout-row-fill</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b6;</span>
                <div class="name">layout-row-line</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b7;</span>
                <div class="name">layout-column-fill</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b8;</span>
                <div class="name">clockwise-fill</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b9;</span>
                <div class="name">clockwise-2-fill</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ba;</span>
                <div class="name">clockwise-line</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bb;</span>
                <div class="name">anticlockwise-fill</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bc;</span>
                <div class="name">anticlockwise-line</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bd;</span>
                <div class="name">layout-column-line</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6be;</span>
                <div class="name">anticlockwise-2-fill</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bf;</span>
                <div class="name">contrast-drop-fill</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c0;</span>
                <div class="name">anticlockwise-2-line</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c1;</span>
                <div class="name">compasses-2-fill</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c2;</span>
                <div class="name">clockwise-2-line</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c3;</span>
                <div class="name">magic-fill</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c4;</span>
                <div class="name">magic-line</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c5;</span>
                <div class="name">compasses-fill</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c6;</span>
                <div class="name">screenshot-2-line</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c7;</span>
                <div class="name">screenshot-2-fill</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c8;</span>
                <div class="name">artboard-2-fill</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6c9;</span>
                <div class="name">screenshot-line</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ca;</span>
                <div class="name">artboard-line</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6cb;</span>
                <div class="name">artboard-fill</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6cc;</span>
                <div class="name">artboard-2-line</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6cd;</span>
                <div class="name">blur-off-line</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ce;</span>
                <div class="name">brush-4-fill</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6cf;</span>
                <div class="name">blur-off-fill</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d0;</span>
                <div class="name">brush-3-line</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d1;</span>
                <div class="name">ball-pen-fill</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d2;</span>
                <div class="name">brush-line</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d3;</span>
                <div class="name">brush-4-line</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d4;</span>
                <div class="name">ball-pen-line</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d5;</span>
                <div class="name">screenshot-fill</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d6;</span>
                <div class="name">brush-2-fill</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d7;</span>
                <div class="name">brush-fill</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d8;</span>
                <div class="name">brush-3-fill</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d9;</span>
                <div class="name">brush-2-line</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6da;</span>
                <div class="name">hammer-line</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6db;</span>
                <div class="name">hammer-fill</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6dc;</span>
                <div class="name">markup-line</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6dd;</span>
                <div class="name">slice-fill</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6de;</span>
                <div class="name">tools-line</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6df;</span>
                <div class="name">tools-fill</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e0;</span>
                <div class="name">layout-row-line</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e1;</span>
                <div class="name">layout-row-fill</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e2;</span>
                <div class="name">layout-column-line</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e3;</span>
                <div class="name">markup-fill</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e4;</span>
                <div class="name">clockwise-fill</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e5;</span>
                <div class="name">clockwise-2-fill</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e6;</span>
                <div class="name">anticlockwise-fill</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e7;</span>
                <div class="name">layout-column-fill</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e8;</span>
                <div class="name">clockwise-line</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e9;</span>
                <div class="name">slice-line</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ea;</span>
                <div class="name">contrast-drop-fill</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6eb;</span>
                <div class="name">compasses-2-fill</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ec;</span>
                <div class="name">compasses-fill</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ed;</span>
                <div class="name">clockwise-2-line</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ee;</span>
                <div class="name">anticlockwise-line</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ef;</span>
                <div class="name">anticlockwise-2-line</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f0;</span>
                <div class="name">screenshot-2-line</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f1;</span>
                <div class="name">magic-fill</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f2;</span>
                <div class="name">screenshot-2-fill</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f3;</span>
                <div class="name">artboard-2-fill</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f4;</span>
                <div class="name">screenshot-line</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f5;</span>
                <div class="name">ball-pen-fill</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f6;</span>
                <div class="name">artboard-2-line</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f7;</span>
                <div class="name">artboard-fill</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f8;</span>
                <div class="name">blur-off-line</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f9;</span>
                <div class="name">anticlockwise-2-fill</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fa;</span>
                <div class="name">brush-2-fill</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fb;</span>
                <div class="name">ball-pen-line</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fc;</span>
                <div class="name">brush-3-line</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fd;</span>
                <div class="name">brush-3-fill</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fe;</span>
                <div class="name">brush-2-line</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ff;</span>
                <div class="name">brush-fill</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe700;</span>
                <div class="name">artboard-line</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe701;</span>
                <div class="name">magic-line</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe702;</span>
                <div class="name">brush-4-fill</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe703;</span>
                <div class="name">contrast-fill</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe704;</span>
                <div class="name">brush-4-line</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe705;</span>
                <div class="name">compasses-2-line</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe706;</span>
                <div class="name">scissors-2-fill</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe707;</span>
                <div class="name">shape-2-line</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe708;</span>
                <div class="name">table-fill</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe709;</span>
                <div class="name">sip-fill</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70a;</span>
                <div class="name">scissors-line</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70b;</span>
                <div class="name">sip-line</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70c;</span>
                <div class="name">shield-keyhole-line</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70d;</span>
                <div class="name">download-cloud-2-fill</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70e;</span>
                <div class="name">download-cloud-2-line</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70f;</span>
                <div class="name">external-link-fill</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe710;</span>
                <div class="name">external-link-line</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe711;</span>
                <div class="name">fingerprint-2-line</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe712;</span>
                <div class="name">fingerprint-2-fill</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe713;</span>
                <div class="name">logout-box-r-fill</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe714;</span>
                <div class="name">fingerprint-fill</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe715;</span>
                <div class="name">logout-circle-r-fill</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe716;</span>
                <div class="name">logout-box-r-line</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe717;</span>
                <div class="name">shield-keyhole-fill</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe718;</span>
                <div class="name">logout-circle-r-line</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe719;</span>
                <div class="name">upload-cloud-2-fill</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71a;</span>
                <div class="name">fingerprint-line</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71b;</span>
                <div class="name">upload-cloud-2-line</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71c;</span>
                <div class="name">wifi-off-fill</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71d;</span>
                <div class="name">copyright-fill</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71e;</span>
                <div class="name">copyright-line</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71f;</span>
                <div class="name">wifi-off-line</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe720;</span>
                <div class="name">checkbox-multiple-blank-line</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe721;</span>
                <div class="name">checkbox-multiple-blank-fill</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe722;</span>
                <div class="name">checkbox-multiple-fill</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe723;</span>
                <div class="name">loader-3-fill</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe724;</span>
                <div class="name">loader-2-fill</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe725;</span>
                <div class="name">loader-2-line</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe726;</span>
                <div class="name">loader-3-line</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe727;</span>
                <div class="name">checkbox-multiple-line</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe728;</span>
                <div class="name">loader-4-fill</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe729;</span>
                <div class="name">loader-4-line</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72a;</span>
                <div class="name">loader-5-fill</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72b;</span>
                <div class="name">loader-5-line</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72c;</span>
                <div class="name">loader-fill</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72d;</span>
                <div class="name">alert-fill</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72e;</span>
                <div class="name">loader-line</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe72f;</span>
                <div class="name">spam-2-fill</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe730;</span>
                <div class="name">spam-2-line</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe731;</span>
                <div class="name">spam-3-line</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe732;</span>
                <div class="name">spam-fill</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe733;</span>
                <div class="name">spam-line</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe734;</span>
                <div class="name">alert-line</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe735;</span>
                <div class="name">filter-fill</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe736;</span>
                <div class="name">filter-line</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe737;</span>
                <div class="name">shield-user-line</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe738;</span>
                <div class="name">timer-flash-fill</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe739;</span>
                <div class="name">shield-user-fill</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73a;</span>
                <div class="name">filter-2-fill</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73b;</span>
                <div class="name">filter-2-line</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73c;</span>
                <div class="name">filter-3-line</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73d;</span>
                <div class="name">star-half-fill</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73e;</span>
                <div class="name">barcode-box-fill</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe73f;</span>
                <div class="name">timer-flash-line</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe740;</span>
                <div class="name">spam-3-fill</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe741;</span>
                <div class="name">barcode-box-line</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe742;</span>
                <div class="name">filter-3-fill</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe743;</span>
                <div class="name">check-double-fill</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe744;</span>
                <div class="name">check-double-line</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe745;</span>
                <div class="name">star-half-s-fill</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe746;</span>
                <div class="name">shield-star-line</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe747;</span>
                <div class="name">shield-star-fill</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe748;</span>
                <div class="name">star-half-line</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe749;</span>
                <div class="name">toggle-fill</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74a;</span>
                <div class="name">toggle-line</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74b;</span>
                <div class="name">star-half-s-line</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74c;</span>
                <div class="name">barcode-fill</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74d;</span>
                <div class="name">notification-badge-line</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74e;</span>
                <div class="name">notification-badge-fill</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe74f;</span>
                <div class="name">base-station-fill</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe750;</span>
                <div class="name">add-box-fill</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe751;</span>
                <div class="name">alarm-warning-fill</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe752;</span>
                <div class="name">barcode-line</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe753;</span>
                <div class="name">alarm-warning-line</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe754;</span>
                <div class="name">add-box-line</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe755;</span>
                <div class="name">base-station-line</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe756;</span>
                <div class="name">add-circle-line</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe757;</span>
                <div class="name">add-fill</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe758;</span>
                <div class="name">alarm-fill</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe759;</span>
                <div class="name">add-line</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75a;</span>
                <div class="name">add-circle-fill</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75b;</span>
                <div class="name">alarm-line</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75c;</span>
                <div class="name">apps-2-line</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75d;</span>
                <div class="name">apps-2-fill</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75e;</span>
                <div class="name">apps-fill</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe75f;</span>
                <div class="name">arrow-down-circle-fill</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe760;</span>
                <div class="name">apps-line</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe761;</span>
                <div class="name">arrow-down-circle-line</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe762;</span>
                <div class="name">arrow-down-fill</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe763;</span>
                <div class="name">arrow-down-line</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe764;</span>
                <div class="name">arrow-down-s-fill</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe765;</span>
                <div class="name">arrow-drop-down-fill</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe766;</span>
                <div class="name">arrow-drop-down-line</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe767;</span>
                <div class="name">arrow-drop-left-fill</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe768;</span>
                <div class="name">arrow-down-s-line</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe769;</span>
                <div class="name">arrow-drop-left-line</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76a;</span>
                <div class="name">arrow-drop-right-fill</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76b;</span>
                <div class="name">arrow-drop-up-fill</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76c;</span>
                <div class="name">arrow-drop-right-line</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76d;</span>
                <div class="name">arrow-go-back-line</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76e;</span>
                <div class="name">arrow-drop-up-line</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe76f;</span>
                <div class="name">arrow-go-back-fill</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe770;</span>
                <div class="name">arrow-go-forward-fill</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe771;</span>
                <div class="name">arrow-left-circle-fill</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe772;</span>
                <div class="name">arrow-left-circle-line</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe773;</span>
                <div class="name">arrow-go-forward-line</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe774;</span>
                <div class="name">arrow-left-down-line</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe775;</span>
                <div class="name">arrow-left-fill</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe776;</span>
                <div class="name">arrow-left-down-fill</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe777;</span>
                <div class="name">arrow-left-line</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe778;</span>
                <div class="name">arrow-left-s-fill</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe779;</span>
                <div class="name">arrow-left-up-line</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77a;</span>
                <div class="name">arrow-right-circle-fill</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77b;</span>
                <div class="name">arrow-left-up-fill</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77c;</span>
                <div class="name">arrow-left-s-line</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77d;</span>
                <div class="name">arrow-right-down-fill</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77e;</span>
                <div class="name">arrow-right-circle-line</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe77f;</span>
                <div class="name">arrow-right-down-line</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe780;</span>
                <div class="name">arrow-right-line</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe781;</span>
                <div class="name">arrow-right-fill</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe782;</span>
                <div class="name">arrow-right-s-fill</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe783;</span>
                <div class="name">arrow-right-s-line</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe784;</span>
                <div class="name">arrow-right-up-fill</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe785;</span>
                <div class="name">arrow-right-up-line</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe786;</span>
                <div class="name">arrow-up-fill</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe787;</span>
                <div class="name">arrow-up-circle-line</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe788;</span>
                <div class="name">arrow-up-s-fill</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe789;</span>
                <div class="name">arrow-up-line</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78a;</span>
                <div class="name">arrow-up-circle-fill</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78b;</span>
                <div class="name">arrow-up-s-line</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78c;</span>
                <div class="name">bluetooth-fill</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78d;</span>
                <div class="name">check-fill</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78e;</span>
                <div class="name">check-line</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe78f;</span>
                <div class="name">bluetooth-connect-line</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe790;</span>
                <div class="name">bluetooth-connect-fill</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe791;</span>
                <div class="name">bluetooth-line</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe792;</span>
                <div class="name">checkbox-blank-circle-line</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe793;</span>
                <div class="name">checkbox-blank-fill</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe794;</span>
                <div class="name">checkbox-blank-circle-fill</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe795;</span>
                <div class="name">checkbox-blank-line</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe796;</span>
                <div class="name">checkbox-circle-fill</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe797;</span>
                <div class="name">checkbox-indeterminate-fill</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe798;</span>
                <div class="name">checkbox-indeterminate-line</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe799;</span>
                <div class="name">checkbox-circle-line</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79a;</span>
                <div class="name">close-circle-fill</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79b;</span>
                <div class="name">checkbox-line</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79c;</span>
                <div class="name">close-circle-line</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79d;</span>
                <div class="name">close-line</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79e;</span>
                <div class="name">dashboard-fill</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe79f;</span>
                <div class="name">close-fill</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a0;</span>
                <div class="name">dashboard-line</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a1;</span>
                <div class="name">delete-back-2-fill</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a2;</span>
                <div class="name">checkbox-fill</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a3;</span>
                <div class="name">delete-back-fill</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a4;</span>
                <div class="name">delete-back-line</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a5;</span>
                <div class="name">delete-back-2-line</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a6;</span>
                <div class="name">delete-bin-2-fill</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a7;</span>
                <div class="name">delete-bin-2-line</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a8;</span>
                <div class="name">delete-bin-3-fill</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7a9;</span>
                <div class="name">delete-bin-3-line</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7aa;</span>
                <div class="name">delete-bin-6-line</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ab;</span>
                <div class="name">delete-bin-4-line</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ac;</span>
                <div class="name">delete-bin-5-line</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ad;</span>
                <div class="name">delete-bin-4-fill</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ae;</span>
                <div class="name">delete-bin-6-fill</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7af;</span>
                <div class="name">delete-bin-fill</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b0;</span>
                <div class="name">delete-bin-7-fill</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b1;</span>
                <div class="name">divide-fill</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b2;</span>
                <div class="name">download-2-line</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b3;</span>
                <div class="name">divide-line</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b4;</span>
                <div class="name">download-cloud-fill</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b5;</span>
                <div class="name">delete-bin-line</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b6;</span>
                <div class="name">delete-bin-7-line</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b7;</span>
                <div class="name">download-2-fill</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b8;</span>
                <div class="name">download-fill</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b9;</span>
                <div class="name">download-line</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ba;</span>
                <div class="name">error-warning-fill</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7bb;</span>
                <div class="name">download-cloud-line</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7bc;</span>
                <div class="name">error-warning-line</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7bd;</span>
                <div class="name">eye-fill</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7be;</span>
                <div class="name">eye-close-fill</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7bf;</span>
                <div class="name">eye-line</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c0;</span>
                <div class="name">eye-off-fill</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c1;</span>
                <div class="name">eye-close-line</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c2;</span>
                <div class="name">find-replace-fill</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c3;</span>
                <div class="name">delete-bin-5-fill</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c4;</span>
                <div class="name">eye-off-line</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c5;</span>
                <div class="name">forbid-2-fill</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c6;</span>
                <div class="name">find-replace-line</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c7;</span>
                <div class="name">forbid-2-line</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c8;</span>
                <div class="name">function-fill</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7c9;</span>
                <div class="name">forbid-fill</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ca;</span>
                <div class="name">gps-line</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7cb;</span>
                <div class="name">forbid-line</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7cc;</span>
                <div class="name">heart-2-line</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7cd;</span>
                <div class="name">gps-fill</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ce;</span>
                <div class="name">function-line</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7cf;</span>
                <div class="name">indeterminate-circle-fill</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d0;</span>
                <div class="name">heart-fill</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d1;</span>
                <div class="name">information-fill</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d2;</span>
                <div class="name">heart-2-fill</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d3;</span>
                <div class="name">heart-line</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d4;</span>
                <div class="name">information-line</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d5;</span>
                <div class="name">lock-2-fill</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d6;</span>
                <div class="name">lock-password-fill</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d7;</span>
                <div class="name">lock-line</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d8;</span>
                <div class="name">lock-fill</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d9;</span>
                <div class="name">lock-2-line</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7da;</span>
                <div class="name">list-settings-line</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7db;</span>
                <div class="name">lock-password-line</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7dc;</span>
                <div class="name">login-box-line</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7dd;</span>
                <div class="name">login-circle-line</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7de;</span>
                <div class="name">indeterminate-circle-line</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7df;</span>
                <div class="name">logout-circle-line</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e0;</span>
                <div class="name">menu-3-line</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e1;</span>
                <div class="name">menu-2-line</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e2;</span>
                <div class="name">menu-3-fill</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e3;</span>
                <div class="name">menu-2-fill</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e4;</span>
                <div class="name">lock-unlock-fill</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e5;</span>
                <div class="name">list-settings-fill</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e6;</span>
                <div class="name">login-box-fill</div>
                <div class="code-name">&amp;#xe7e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e7;</span>
                <div class="name">lock-unlock-line</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e8;</span>
                <div class="name">login-circle-fill</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7e9;</span>
                <div class="name">menu-line</div>
                <div class="code-name">&amp;#xe7e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ea;</span>
                <div class="name">menu-fill</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7eb;</span>
                <div class="name">more-2-fill</div>
                <div class="code-name">&amp;#xe7eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ec;</span>
                <div class="name">logout-box-line</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ed;</span>
                <div class="name">more-2-line</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ee;</span>
                <div class="name">logout-circle-fill</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ef;</span>
                <div class="name">qr-scan-2-fill</div>
                <div class="code-name">&amp;#xe7ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f0;</span>
                <div class="name">qr-scan-2-line</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f1;</span>
                <div class="name">qr-code-fill</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f2;</span>
                <div class="name">more-fill</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f3;</span>
                <div class="name">more-line</div>
                <div class="code-name">&amp;#xe7f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f4;</span>
                <div class="name">qr-code-line</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f5;</span>
                <div class="name">logout-box-fill</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f6;</span>
                <div class="name">settings-2-fill</div>
                <div class="code-name">&amp;#xe7f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f7;</span>
                <div class="name">search-line</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f8;</span>
                <div class="name">settings-2-line</div>
                <div class="code-name">&amp;#xe7f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7f9;</span>
                <div class="name">settings-3-fill</div>
                <div class="code-name">&amp;#xe7f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7fa;</span>
                <div class="name">settings-3-line</div>
                <div class="code-name">&amp;#xe7fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7fb;</span>
                <div class="name">settings-4-line</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7fc;</span>
                <div class="name">settings-5-fill</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7fd;</span>
                <div class="name">settings-4-fill</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7fe;</span>
                <div class="name">settings-6-fill</div>
                <div class="code-name">&amp;#xe7fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7ff;</span>
                <div class="name">qr-scan-line</div>
                <div class="code-name">&amp;#xe7ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe800;</span>
                <div class="name">settings-6-line</div>
                <div class="code-name">&amp;#xe800;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe801;</span>
                <div class="name">qr-scan-fill</div>
                <div class="code-name">&amp;#xe801;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe802;</span>
                <div class="name">settings-fill</div>
                <div class="code-name">&amp;#xe802;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe803;</span>
                <div class="name">question-fill</div>
                <div class="code-name">&amp;#xe803;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe804;</span>
                <div class="name">question-line</div>
                <div class="code-name">&amp;#xe804;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe805;</span>
                <div class="name">refresh-fill</div>
                <div class="code-name">&amp;#xe805;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe806;</span>
                <div class="name">radio-button-fill</div>
                <div class="code-name">&amp;#xe806;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe807;</span>
                <div class="name">refresh-line</div>
                <div class="code-name">&amp;#xe807;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe808;</span>
                <div class="name">settings-5-line</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe809;</span>
                <div class="name">restart-fill</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80a;</span>
                <div class="name">rss-fill</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80b;</span>
                <div class="name">restart-line</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80c;</span>
                <div class="name">radio-button-line</div>
                <div class="code-name">&amp;#xe80c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80d;</span>
                <div class="name">rss-line</div>
                <div class="code-name">&amp;#xe80d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80e;</span>
                <div class="name">scan-fill</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe80f;</span>
                <div class="name">scan-2-line</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe810;</span>
                <div class="name">scan-line</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe811;</span>
                <div class="name">search-2-fill</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe812;</span>
                <div class="name">search-2-line</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe813;</span>
                <div class="name">search-fill</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe814;</span>
                <div class="name">search-eye-fill</div>
                <div class="code-name">&amp;#xe814;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe815;</span>
                <div class="name">search-eye-line</div>
                <div class="code-name">&amp;#xe815;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe816;</span>
                <div class="name">settings-line</div>
                <div class="code-name">&amp;#xe816;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe817;</span>
                <div class="name">side-bar-line</div>
                <div class="code-name">&amp;#xe817;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe818;</span>
                <div class="name">star-fill</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe819;</span>
                <div class="name">scan-2-fill</div>
                <div class="code-name">&amp;#xe819;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81a;</span>
                <div class="name">subtract-line</div>
                <div class="code-name">&amp;#xe81a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81b;</span>
                <div class="name">subtract-fill</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81c;</span>
                <div class="name">thumb-down-fill</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81d;</span>
                <div class="name">thumb-down-line</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81e;</span>
                <div class="name">time-line</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81f;</span>
                <div class="name">timer-2-fill</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe820;</span>
                <div class="name">share-box-fill</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe821;</span>
                <div class="name">share-box-line</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe822;</span>
                <div class="name">share-forward-2-line</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe823;</span>
                <div class="name">share-forward-2-fill</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe824;</span>
                <div class="name">share-fill</div>
                <div class="code-name">&amp;#xe824;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe825;</span>
                <div class="name">share-circle-fill</div>
                <div class="code-name">&amp;#xe825;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe826;</span>
                <div class="name">share-forward-fill</div>
                <div class="code-name">&amp;#xe826;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe827;</span>
                <div class="name">share-forward-box-line</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe828;</span>
                <div class="name">share-line</div>
                <div class="code-name">&amp;#xe828;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe829;</span>
                <div class="name">share-forward-line</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82a;</span>
                <div class="name">shield-cross-line</div>
                <div class="code-name">&amp;#xe82a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82b;</span>
                <div class="name">shield-flash-line</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82c;</span>
                <div class="name">shield-line</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82d;</span>
                <div class="name">shut-down-fill</div>
                <div class="code-name">&amp;#xe82d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82e;</span>
                <div class="name">shut-down-line</div>
                <div class="code-name">&amp;#xe82e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe82f;</span>
                <div class="name">side-bar-fill</div>
                <div class="code-name">&amp;#xe82f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe830;</span>
                <div class="name">upload-2-fill</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe831;</span>
                <div class="name">upload-cloud-fill</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe832;</span>
                <div class="name">upload-cloud-line</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe833;</span>
                <div class="name">timer-line</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe834;</span>
                <div class="name">upload-line</div>
                <div class="code-name">&amp;#xe834;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe835;</span>
                <div class="name">upload-fill</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe836;</span>
                <div class="name">wifi-line</div>
                <div class="code-name">&amp;#xe836;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe837;</span>
                <div class="name">zoom-out-fill</div>
                <div class="code-name">&amp;#xe837;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe838;</span>
                <div class="name">zoom-out-line</div>
                <div class="code-name">&amp;#xe838;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe839;</span>
                <div class="name">star-s-fill</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83a;</span>
                <div class="name">thumb-up-fill</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83b;</span>
                <div class="name">star-s-line</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83c;</span>
                <div class="name">shield-fill</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83d;</span>
                <div class="name">time-fill</div>
                <div class="code-name">&amp;#xe83d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83e;</span>
                <div class="name">timer-2-line</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe83f;</span>
                <div class="name">shield-cross-fill</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe840;</span>
                <div class="name">shield-flash-fill</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe841;</span>
                <div class="name">share-circle-line</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe842;</span>
                <div class="name">wifi-fill</div>
                <div class="code-name">&amp;#xe842;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe843;</span>
                <div class="name">timer-fill</div>
                <div class="code-name">&amp;#xe843;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe844;</span>
                <div class="name">zoom-in-fill</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe845;</span>
                <div class="name">zoom-in-line</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe846;</span>
                <div class="name">share-forward-box-fill</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe847;</span>
                <div class="name">star-line</div>
                <div class="code-name">&amp;#xe847;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe848;</span>
                <div class="name">thumb-up-line</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe849;</span>
                <div class="name">upload-2-line</div>
                <div class="code-name">&amp;#xe849;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84a;</span>
                <div class="name">calendar-check-line</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84b;</span>
                <div class="name">calendar-check-fill</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84c;</span>
                <div class="name">cloud-off-fill</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84d;</span>
                <div class="name">cloud-off-line</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84e;</span>
                <div class="name">bar-chart-horizontal-line</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe84f;</span>
                <div class="name">bar-chart-grouped-line</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe850;</span>
                <div class="name">bar-chart-grouped-fill</div>
                <div class="code-name">&amp;#xe850;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe851;</span>
                <div class="name">mail-add-line</div>
                <div class="code-name">&amp;#xe851;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe852;</span>
                <div class="name">bar-chart-horizontal-fill</div>
                <div class="code-name">&amp;#xe852;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe853;</span>
                <div class="name">mail-add-fill</div>
                <div class="code-name">&amp;#xe853;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe854;</span>
                <div class="name">mail-check-fill</div>
                <div class="code-name">&amp;#xe854;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe855;</span>
                <div class="name">mail-check-line</div>
                <div class="code-name">&amp;#xe855;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe856;</span>
                <div class="name">mail-close-fill</div>
                <div class="code-name">&amp;#xe856;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe857;</span>
                <div class="name">mail-close-line</div>
                <div class="code-name">&amp;#xe857;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe858;</span>
                <div class="name">mail-download-fill</div>
                <div class="code-name">&amp;#xe858;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe859;</span>
                <div class="name">mail-download-line</div>
                <div class="code-name">&amp;#xe859;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85a;</span>
                <div class="name">mail-forbid-line</div>
                <div class="code-name">&amp;#xe85a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85b;</span>
                <div class="name">mail-forbid-fill</div>
                <div class="code-name">&amp;#xe85b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85c;</span>
                <div class="name">mail-lock-fill</div>
                <div class="code-name">&amp;#xe85c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85d;</span>
                <div class="name">mail-lock-line</div>
                <div class="code-name">&amp;#xe85d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85e;</span>
                <div class="name">mail-star-fill</div>
                <div class="code-name">&amp;#xe85e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe85f;</span>
                <div class="name">mail-star-line</div>
                <div class="code-name">&amp;#xe85f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe860;</span>
                <div class="name">mail-settings-fill</div>
                <div class="code-name">&amp;#xe860;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe861;</span>
                <div class="name">archive-drawer-line</div>
                <div class="code-name">&amp;#xe861;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe862;</span>
                <div class="name">at-fill</div>
                <div class="code-name">&amp;#xe862;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe863;</span>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">&amp;#xe863;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe864;</span>
                <div class="name">attachment-line</div>
                <div class="code-name">&amp;#xe864;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe865;</span>
                <div class="name">archive-fill</div>
                <div class="code-name">&amp;#xe865;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe866;</span>
                <div class="name">mail-settings-line</div>
                <div class="code-name">&amp;#xe866;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe867;</span>
                <div class="name">at-line</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe868;</span>
                <div class="name">bar-chart-2-fill</div>
                <div class="code-name">&amp;#xe868;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe869;</span>
                <div class="name">award-fill</div>
                <div class="code-name">&amp;#xe869;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe86a;</span>
                <div class="name">bar-chart-2-line</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe86b;</span>
                <div class="name">bar-chart-box-line</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe86c;</span>
                <div class="name">bar-chart-fill</div>
                <div class="code-name">&amp;#xe86c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe86d;</span>
                <div class="name">attachment-fill</div>
                <div class="code-name">&amp;#xe86d;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 layui-icon 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'layui-icon';
  src: url('layui-icon.eot');
  src: url('layui-icon.eot?#iefix') format('embedded-opentype'),
      url('layui-icon.woff2') format('woff2'),
      url('layui-icon.woff') format('woff'),
      url('layui-icon.ttf') format('truetype'),
      url('layui-icon.svg#layui-icon') format('svg');
}
</code></pre>
          <h3 id="-layui-icon-">第二步：定义使用 layui-icon 的样式</h3>
<pre><code class="language-css"
>.layui-icon {
  font-family: "layui-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="layui-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"layui-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "layui-icon"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon layui-icon icon-hammer-line"></span>
            <div class="name">
              hammer-line
            </div>
            <div class="code-name">.icon-hammer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-hammer-fill"></span>
            <div class="name">
              hammer-fill
            </div>
            <div class="code-name">.icon-hammer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-tools-fill"></span>
            <div class="name">
              tools-fill
            </div>
            <div class="code-name">.icon-tools-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-tools-line"></span>
            <div class="name">
              tools-line
            </div>
            <div class="code-name">.icon-tools-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-markup-line"></span>
            <div class="name">
              markup-line
            </div>
            <div class="code-name">.icon-markup-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-slice-fill"></span>
            <div class="name">
              slice-fill
            </div>
            <div class="code-name">.icon-slice-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-slice-line"></span>
            <div class="name">
              slice-line
            </div>
            <div class="code-name">.icon-slice-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-markup-fill"></span>
            <div class="name">
              markup-fill
            </div>
            <div class="code-name">.icon-markup-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-row-fill"></span>
            <div class="name">
              layout-row-fill
            </div>
            <div class="code-name">.icon-layout-row-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-row-line"></span>
            <div class="name">
              layout-row-line
            </div>
            <div class="code-name">.icon-layout-row-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-column-fill"></span>
            <div class="name">
              layout-column-fill
            </div>
            <div class="code-name">.icon-layout-column-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise-fill"></span>
            <div class="name">
              clockwise-fill
            </div>
            <div class="code-name">.icon-clockwise-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise--fill"></span>
            <div class="name">
              clockwise-2-fill
            </div>
            <div class="code-name">.icon-clockwise--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise-line"></span>
            <div class="name">
              clockwise-line
            </div>
            <div class="code-name">.icon-clockwise-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise-fill"></span>
            <div class="name">
              anticlockwise-fill
            </div>
            <div class="code-name">.icon-anticlockwise-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise-line"></span>
            <div class="name">
              anticlockwise-line
            </div>
            <div class="code-name">.icon-anticlockwise-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-column-line"></span>
            <div class="name">
              layout-column-line
            </div>
            <div class="code-name">.icon-layout-column-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise--fill"></span>
            <div class="name">
              anticlockwise-2-fill
            </div>
            <div class="code-name">.icon-anticlockwise--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-contrast-drop-fill"></span>
            <div class="name">
              contrast-drop-fill
            </div>
            <div class="code-name">.icon-contrast-drop-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise--line"></span>
            <div class="name">
              anticlockwise-2-line
            </div>
            <div class="code-name">.icon-anticlockwise--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-compasses--fill"></span>
            <div class="name">
              compasses-2-fill
            </div>
            <div class="code-name">.icon-compasses--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise--line"></span>
            <div class="name">
              clockwise-2-line
            </div>
            <div class="code-name">.icon-clockwise--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-magic-fill"></span>
            <div class="name">
              magic-fill
            </div>
            <div class="code-name">.icon-magic-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-magic-line"></span>
            <div class="name">
              magic-line
            </div>
            <div class="code-name">.icon-magic-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-compasses-fill"></span>
            <div class="name">
              compasses-fill
            </div>
            <div class="code-name">.icon-compasses-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot--line"></span>
            <div class="name">
              screenshot-2-line
            </div>
            <div class="code-name">.icon-screenshot--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot--fill"></span>
            <div class="name">
              screenshot-2-fill
            </div>
            <div class="code-name">.icon-screenshot--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard--fill"></span>
            <div class="name">
              artboard-2-fill
            </div>
            <div class="code-name">.icon-artboard--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot-line"></span>
            <div class="name">
              screenshot-line
            </div>
            <div class="code-name">.icon-screenshot-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard-line"></span>
            <div class="name">
              artboard-line
            </div>
            <div class="code-name">.icon-artboard-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard-fill"></span>
            <div class="name">
              artboard-fill
            </div>
            <div class="code-name">.icon-artboard-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard--line"></span>
            <div class="name">
              artboard-2-line
            </div>
            <div class="code-name">.icon-artboard--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-blur-off-line"></span>
            <div class="name">
              blur-off-line
            </div>
            <div class="code-name">.icon-blur-off-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill"></span>
            <div class="name">
              brush-4-fill
            </div>
            <div class="code-name">.icon-brush--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-blur-off-fill"></span>
            <div class="name">
              blur-off-fill
            </div>
            <div class="code-name">.icon-blur-off-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line"></span>
            <div class="name">
              brush-3-line
            </div>
            <div class="code-name">.icon-brush--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-ball-pen-fill"></span>
            <div class="name">
              ball-pen-fill
            </div>
            <div class="code-name">.icon-ball-pen-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush-line"></span>
            <div class="name">
              brush-line
            </div>
            <div class="code-name">.icon-brush-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line1"></span>
            <div class="name">
              brush-4-line
            </div>
            <div class="code-name">.icon-brush--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-ball-pen-line"></span>
            <div class="name">
              ball-pen-line
            </div>
            <div class="code-name">.icon-ball-pen-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot-fill"></span>
            <div class="name">
              screenshot-fill
            </div>
            <div class="code-name">.icon-screenshot-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill1"></span>
            <div class="name">
              brush-2-fill
            </div>
            <div class="code-name">.icon-brush--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush-fill"></span>
            <div class="name">
              brush-fill
            </div>
            <div class="code-name">.icon-brush-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill2"></span>
            <div class="name">
              brush-3-fill
            </div>
            <div class="code-name">.icon-brush--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line2"></span>
            <div class="name">
              brush-2-line
            </div>
            <div class="code-name">.icon-brush--line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-hammer-line1"></span>
            <div class="name">
              hammer-line
            </div>
            <div class="code-name">.icon-hammer-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-hammer-fill1"></span>
            <div class="name">
              hammer-fill
            </div>
            <div class="code-name">.icon-hammer-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-markup-line1"></span>
            <div class="name">
              markup-line
            </div>
            <div class="code-name">.icon-markup-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-slice-fill1"></span>
            <div class="name">
              slice-fill
            </div>
            <div class="code-name">.icon-slice-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-tools-line1"></span>
            <div class="name">
              tools-line
            </div>
            <div class="code-name">.icon-tools-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-tools-fill1"></span>
            <div class="name">
              tools-fill
            </div>
            <div class="code-name">.icon-tools-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-row-line1"></span>
            <div class="name">
              layout-row-line
            </div>
            <div class="code-name">.icon-layout-row-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-row-fill1"></span>
            <div class="name">
              layout-row-fill
            </div>
            <div class="code-name">.icon-layout-row-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-column-line1"></span>
            <div class="name">
              layout-column-line
            </div>
            <div class="code-name">.icon-layout-column-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-markup-fill1"></span>
            <div class="name">
              markup-fill
            </div>
            <div class="code-name">.icon-markup-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise-fill1"></span>
            <div class="name">
              clockwise-fill
            </div>
            <div class="code-name">.icon-clockwise-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise--fill1"></span>
            <div class="name">
              clockwise-2-fill
            </div>
            <div class="code-name">.icon-clockwise--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise-fill1"></span>
            <div class="name">
              anticlockwise-fill
            </div>
            <div class="code-name">.icon-anticlockwise-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-layout-column-fill1"></span>
            <div class="name">
              layout-column-fill
            </div>
            <div class="code-name">.icon-layout-column-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise-line1"></span>
            <div class="name">
              clockwise-line
            </div>
            <div class="code-name">.icon-clockwise-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-slice-line1"></span>
            <div class="name">
              slice-line
            </div>
            <div class="code-name">.icon-slice-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-contrast-drop-fill1"></span>
            <div class="name">
              contrast-drop-fill
            </div>
            <div class="code-name">.icon-contrast-drop-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-compasses--fill1"></span>
            <div class="name">
              compasses-2-fill
            </div>
            <div class="code-name">.icon-compasses--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-compasses-fill1"></span>
            <div class="name">
              compasses-fill
            </div>
            <div class="code-name">.icon-compasses-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-clockwise--line1"></span>
            <div class="name">
              clockwise-2-line
            </div>
            <div class="code-name">.icon-clockwise--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise-line1"></span>
            <div class="name">
              anticlockwise-line
            </div>
            <div class="code-name">.icon-anticlockwise-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise--line1"></span>
            <div class="name">
              anticlockwise-2-line
            </div>
            <div class="code-name">.icon-anticlockwise--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot--line1"></span>
            <div class="name">
              screenshot-2-line
            </div>
            <div class="code-name">.icon-screenshot--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-magic-fill1"></span>
            <div class="name">
              magic-fill
            </div>
            <div class="code-name">.icon-magic-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot--fill1"></span>
            <div class="name">
              screenshot-2-fill
            </div>
            <div class="code-name">.icon-screenshot--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard--fill1"></span>
            <div class="name">
              artboard-2-fill
            </div>
            <div class="code-name">.icon-artboard--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-screenshot-line1"></span>
            <div class="name">
              screenshot-line
            </div>
            <div class="code-name">.icon-screenshot-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-ball-pen-fill1"></span>
            <div class="name">
              ball-pen-fill
            </div>
            <div class="code-name">.icon-ball-pen-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard--line1"></span>
            <div class="name">
              artboard-2-line
            </div>
            <div class="code-name">.icon-artboard--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard-fill1"></span>
            <div class="name">
              artboard-fill
            </div>
            <div class="code-name">.icon-artboard-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-blur-off-line1"></span>
            <div class="name">
              blur-off-line
            </div>
            <div class="code-name">.icon-blur-off-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-anticlockwise--fill1"></span>
            <div class="name">
              anticlockwise-2-fill
            </div>
            <div class="code-name">.icon-anticlockwise--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill3"></span>
            <div class="name">
              brush-2-fill
            </div>
            <div class="code-name">.icon-brush--fill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-ball-pen-line1"></span>
            <div class="name">
              ball-pen-line
            </div>
            <div class="code-name">.icon-ball-pen-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line3"></span>
            <div class="name">
              brush-3-line
            </div>
            <div class="code-name">.icon-brush--line3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill4"></span>
            <div class="name">
              brush-3-fill
            </div>
            <div class="code-name">.icon-brush--fill4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line4"></span>
            <div class="name">
              brush-2-line
            </div>
            <div class="code-name">.icon-brush--line4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush-fill1"></span>
            <div class="name">
              brush-fill
            </div>
            <div class="code-name">.icon-brush-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-artboard-line1"></span>
            <div class="name">
              artboard-line
            </div>
            <div class="code-name">.icon-artboard-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-magic-line1"></span>
            <div class="name">
              magic-line
            </div>
            <div class="code-name">.icon-magic-line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--fill5"></span>
            <div class="name">
              brush-4-fill
            </div>
            <div class="code-name">.icon-brush--fill5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-contrast-fill"></span>
            <div class="name">
              contrast-fill
            </div>
            <div class="code-name">.icon-contrast-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-brush--line5"></span>
            <div class="name">
              brush-4-line
            </div>
            <div class="code-name">.icon-brush--line5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-compasses--line"></span>
            <div class="name">
              compasses-2-line
            </div>
            <div class="code-name">.icon-compasses--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scissors--fill"></span>
            <div class="name">
              scissors-2-fill
            </div>
            <div class="code-name">.icon-scissors--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shape--line"></span>
            <div class="name">
              shape-2-line
            </div>
            <div class="code-name">.icon-shape--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-table-fill"></span>
            <div class="name">
              table-fill
            </div>
            <div class="code-name">.icon-table-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-sip-fill"></span>
            <div class="name">
              sip-fill
            </div>
            <div class="code-name">.icon-sip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scissors-line"></span>
            <div class="name">
              scissors-line
            </div>
            <div class="code-name">.icon-scissors-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-sip-line"></span>
            <div class="name">
              sip-line
            </div>
            <div class="code-name">.icon-sip-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-keyhole-line"></span>
            <div class="name">
              shield-keyhole-line
            </div>
            <div class="code-name">.icon-shield-keyhole-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-cloud--fill"></span>
            <div class="name">
              download-cloud-2-fill
            </div>
            <div class="code-name">.icon-download-cloud--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-cloud--line"></span>
            <div class="name">
              download-cloud-2-line
            </div>
            <div class="code-name">.icon-download-cloud--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-external-link-fill"></span>
            <div class="name">
              external-link-fill
            </div>
            <div class="code-name">.icon-external-link-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-external-link-line"></span>
            <div class="name">
              external-link-line
            </div>
            <div class="code-name">.icon-external-link-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-fingerprint--line"></span>
            <div class="name">
              fingerprint-2-line
            </div>
            <div class="code-name">.icon-fingerprint--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-fingerprint--fill"></span>
            <div class="name">
              fingerprint-2-fill
            </div>
            <div class="code-name">.icon-fingerprint--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-box-r-fill"></span>
            <div class="name">
              logout-box-r-fill
            </div>
            <div class="code-name">.icon-logout-box-r-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-fingerprint-fill"></span>
            <div class="name">
              fingerprint-fill
            </div>
            <div class="code-name">.icon-fingerprint-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-circle-r-fill"></span>
            <div class="name">
              logout-circle-r-fill
            </div>
            <div class="code-name">.icon-logout-circle-r-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-box-r-line"></span>
            <div class="name">
              logout-box-r-line
            </div>
            <div class="code-name">.icon-logout-box-r-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-keyhole-fill"></span>
            <div class="name">
              shield-keyhole-fill
            </div>
            <div class="code-name">.icon-shield-keyhole-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-circle-r-line"></span>
            <div class="name">
              logout-circle-r-line
            </div>
            <div class="code-name">.icon-logout-circle-r-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-cloud--fill"></span>
            <div class="name">
              upload-cloud-2-fill
            </div>
            <div class="code-name">.icon-upload-cloud--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-fingerprint-line"></span>
            <div class="name">
              fingerprint-line
            </div>
            <div class="code-name">.icon-fingerprint-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-cloud--line"></span>
            <div class="name">
              upload-cloud-2-line
            </div>
            <div class="code-name">.icon-upload-cloud--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-wifi-off-fill"></span>
            <div class="name">
              wifi-off-fill
            </div>
            <div class="code-name">.icon-wifi-off-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-copyright-fill"></span>
            <div class="name">
              copyright-fill
            </div>
            <div class="code-name">.icon-copyright-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-copyright-line"></span>
            <div class="name">
              copyright-line
            </div>
            <div class="code-name">.icon-copyright-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-wifi-off-line"></span>
            <div class="name">
              wifi-off-line
            </div>
            <div class="code-name">.icon-wifi-off-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-multiple-blank-line"></span>
            <div class="name">
              checkbox-multiple-blank-line
            </div>
            <div class="code-name">.icon-checkbox-multiple-blank-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-multiple-blank-fill"></span>
            <div class="name">
              checkbox-multiple-blank-fill
            </div>
            <div class="code-name">.icon-checkbox-multiple-blank-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-multiple-fill"></span>
            <div class="name">
              checkbox-multiple-fill
            </div>
            <div class="code-name">.icon-checkbox-multiple-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--fill"></span>
            <div class="name">
              loader-3-fill
            </div>
            <div class="code-name">.icon-loader--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--fill1"></span>
            <div class="name">
              loader-2-fill
            </div>
            <div class="code-name">.icon-loader--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--line"></span>
            <div class="name">
              loader-2-line
            </div>
            <div class="code-name">.icon-loader--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--line1"></span>
            <div class="name">
              loader-3-line
            </div>
            <div class="code-name">.icon-loader--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-multiple-line"></span>
            <div class="name">
              checkbox-multiple-line
            </div>
            <div class="code-name">.icon-checkbox-multiple-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--fill2"></span>
            <div class="name">
              loader-4-fill
            </div>
            <div class="code-name">.icon-loader--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--line2"></span>
            <div class="name">
              loader-4-line
            </div>
            <div class="code-name">.icon-loader--line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--fill3"></span>
            <div class="name">
              loader-5-fill
            </div>
            <div class="code-name">.icon-loader--fill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader--line3"></span>
            <div class="name">
              loader-5-line
            </div>
            <div class="code-name">.icon-loader--line3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader-fill"></span>
            <div class="name">
              loader-fill
            </div>
            <div class="code-name">.icon-loader-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alert-fill"></span>
            <div class="name">
              alert-fill
            </div>
            <div class="code-name">.icon-alert-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-loader-line"></span>
            <div class="name">
              loader-line
            </div>
            <div class="code-name">.icon-loader-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam--fill"></span>
            <div class="name">
              spam-2-fill
            </div>
            <div class="code-name">.icon-spam--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam--line"></span>
            <div class="name">
              spam-2-line
            </div>
            <div class="code-name">.icon-spam--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam--line1"></span>
            <div class="name">
              spam-3-line
            </div>
            <div class="code-name">.icon-spam--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam-fill"></span>
            <div class="name">
              spam-fill
            </div>
            <div class="code-name">.icon-spam-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam-line"></span>
            <div class="name">
              spam-line
            </div>
            <div class="code-name">.icon-spam-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alert-line"></span>
            <div class="name">
              alert-line
            </div>
            <div class="code-name">.icon-alert-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter-fill"></span>
            <div class="name">
              filter-fill
            </div>
            <div class="code-name">.icon-filter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter-line"></span>
            <div class="name">
              filter-line
            </div>
            <div class="code-name">.icon-filter-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-user-line"></span>
            <div class="name">
              shield-user-line
            </div>
            <div class="code-name">.icon-shield-user-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer-flash-fill"></span>
            <div class="name">
              timer-flash-fill
            </div>
            <div class="code-name">.icon-timer-flash-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-user-fill"></span>
            <div class="name">
              shield-user-fill
            </div>
            <div class="code-name">.icon-shield-user-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter--fill"></span>
            <div class="name">
              filter-2-fill
            </div>
            <div class="code-name">.icon-filter--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter--line"></span>
            <div class="name">
              filter-2-line
            </div>
            <div class="code-name">.icon-filter--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter--line1"></span>
            <div class="name">
              filter-3-line
            </div>
            <div class="code-name">.icon-filter--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-half-fill"></span>
            <div class="name">
              star-half-fill
            </div>
            <div class="code-name">.icon-star-half-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-barcode-box-fill"></span>
            <div class="name">
              barcode-box-fill
            </div>
            <div class="code-name">.icon-barcode-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer-flash-line"></span>
            <div class="name">
              timer-flash-line
            </div>
            <div class="code-name">.icon-timer-flash-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-spam--fill1"></span>
            <div class="name">
              spam-3-fill
            </div>
            <div class="code-name">.icon-spam--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-barcode-box-line"></span>
            <div class="name">
              barcode-box-line
            </div>
            <div class="code-name">.icon-barcode-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-filter--fill1"></span>
            <div class="name">
              filter-3-fill
            </div>
            <div class="code-name">.icon-filter--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-check-double-fill"></span>
            <div class="name">
              check-double-fill
            </div>
            <div class="code-name">.icon-check-double-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-check-double-line"></span>
            <div class="name">
              check-double-line
            </div>
            <div class="code-name">.icon-check-double-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-half-s-fill"></span>
            <div class="name">
              star-half-s-fill
            </div>
            <div class="code-name">.icon-star-half-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-star-line"></span>
            <div class="name">
              shield-star-line
            </div>
            <div class="code-name">.icon-shield-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-star-fill"></span>
            <div class="name">
              shield-star-fill
            </div>
            <div class="code-name">.icon-shield-star-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-half-line"></span>
            <div class="name">
              star-half-line
            </div>
            <div class="code-name">.icon-star-half-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-toggle-fill"></span>
            <div class="name">
              toggle-fill
            </div>
            <div class="code-name">.icon-toggle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-toggle-line"></span>
            <div class="name">
              toggle-line
            </div>
            <div class="code-name">.icon-toggle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-half-s-line"></span>
            <div class="name">
              star-half-s-line
            </div>
            <div class="code-name">.icon-star-half-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-barcode-fill"></span>
            <div class="name">
              barcode-fill
            </div>
            <div class="code-name">.icon-barcode-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-notification-badge-line"></span>
            <div class="name">
              notification-badge-line
            </div>
            <div class="code-name">.icon-notification-badge-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-notification-badge-fill"></span>
            <div class="name">
              notification-badge-fill
            </div>
            <div class="code-name">.icon-notification-badge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-base-station-fill"></span>
            <div class="name">
              base-station-fill
            </div>
            <div class="code-name">.icon-base-station-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-box-fill"></span>
            <div class="name">
              add-box-fill
            </div>
            <div class="code-name">.icon-add-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alarm-warning-fill"></span>
            <div class="name">
              alarm-warning-fill
            </div>
            <div class="code-name">.icon-alarm-warning-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-barcode-line"></span>
            <div class="name">
              barcode-line
            </div>
            <div class="code-name">.icon-barcode-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alarm-warning-line"></span>
            <div class="name">
              alarm-warning-line
            </div>
            <div class="code-name">.icon-alarm-warning-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-box-line"></span>
            <div class="name">
              add-box-line
            </div>
            <div class="code-name">.icon-add-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-base-station-line"></span>
            <div class="name">
              base-station-line
            </div>
            <div class="code-name">.icon-base-station-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-circle-line"></span>
            <div class="name">
              add-circle-line
            </div>
            <div class="code-name">.icon-add-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-fill"></span>
            <div class="name">
              add-fill
            </div>
            <div class="code-name">.icon-add-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alarm-fill"></span>
            <div class="name">
              alarm-fill
            </div>
            <div class="code-name">.icon-alarm-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-line"></span>
            <div class="name">
              add-line
            </div>
            <div class="code-name">.icon-add-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-add-circle-fill"></span>
            <div class="name">
              add-circle-fill
            </div>
            <div class="code-name">.icon-add-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-alarm-line"></span>
            <div class="name">
              alarm-line
            </div>
            <div class="code-name">.icon-alarm-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-apps--line"></span>
            <div class="name">
              apps-2-line
            </div>
            <div class="code-name">.icon-apps--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-apps--fill"></span>
            <div class="name">
              apps-2-fill
            </div>
            <div class="code-name">.icon-apps--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-apps-fill"></span>
            <div class="name">
              apps-fill
            </div>
            <div class="code-name">.icon-apps-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-circle-fill"></span>
            <div class="name">
              arrow-down-circle-fill
            </div>
            <div class="code-name">.icon-arrow-down-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-apps-line"></span>
            <div class="name">
              apps-line
            </div>
            <div class="code-name">.icon-apps-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-circle-line"></span>
            <div class="name">
              arrow-down-circle-line
            </div>
            <div class="code-name">.icon-arrow-down-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-fill"></span>
            <div class="name">
              arrow-down-fill
            </div>
            <div class="code-name">.icon-arrow-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-line"></span>
            <div class="name">
              arrow-down-line
            </div>
            <div class="code-name">.icon-arrow-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-s-fill"></span>
            <div class="name">
              arrow-down-s-fill
            </div>
            <div class="code-name">.icon-arrow-down-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-down-fill"></span>
            <div class="name">
              arrow-drop-down-fill
            </div>
            <div class="code-name">.icon-arrow-drop-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-down-line"></span>
            <div class="name">
              arrow-drop-down-line
            </div>
            <div class="code-name">.icon-arrow-drop-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-left-fill"></span>
            <div class="name">
              arrow-drop-left-fill
            </div>
            <div class="code-name">.icon-arrow-drop-left-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-down-s-line"></span>
            <div class="name">
              arrow-down-s-line
            </div>
            <div class="code-name">.icon-arrow-down-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-left-line"></span>
            <div class="name">
              arrow-drop-left-line
            </div>
            <div class="code-name">.icon-arrow-drop-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-right-fill"></span>
            <div class="name">
              arrow-drop-right-fill
            </div>
            <div class="code-name">.icon-arrow-drop-right-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-up-fill"></span>
            <div class="name">
              arrow-drop-up-fill
            </div>
            <div class="code-name">.icon-arrow-drop-up-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-right-line"></span>
            <div class="name">
              arrow-drop-right-line
            </div>
            <div class="code-name">.icon-arrow-drop-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-go-back-line"></span>
            <div class="name">
              arrow-go-back-line
            </div>
            <div class="code-name">.icon-arrow-go-back-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-drop-up-line"></span>
            <div class="name">
              arrow-drop-up-line
            </div>
            <div class="code-name">.icon-arrow-drop-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-go-back-fill"></span>
            <div class="name">
              arrow-go-back-fill
            </div>
            <div class="code-name">.icon-arrow-go-back-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-go-forward-fill"></span>
            <div class="name">
              arrow-go-forward-fill
            </div>
            <div class="code-name">.icon-arrow-go-forward-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-circle-fill"></span>
            <div class="name">
              arrow-left-circle-fill
            </div>
            <div class="code-name">.icon-arrow-left-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-circle-line"></span>
            <div class="name">
              arrow-left-circle-line
            </div>
            <div class="code-name">.icon-arrow-left-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-go-forward-line"></span>
            <div class="name">
              arrow-go-forward-line
            </div>
            <div class="code-name">.icon-arrow-go-forward-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-down-line"></span>
            <div class="name">
              arrow-left-down-line
            </div>
            <div class="code-name">.icon-arrow-left-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-fill"></span>
            <div class="name">
              arrow-left-fill
            </div>
            <div class="code-name">.icon-arrow-left-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-down-fill"></span>
            <div class="name">
              arrow-left-down-fill
            </div>
            <div class="code-name">.icon-arrow-left-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-line"></span>
            <div class="name">
              arrow-left-line
            </div>
            <div class="code-name">.icon-arrow-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-s-fill"></span>
            <div class="name">
              arrow-left-s-fill
            </div>
            <div class="code-name">.icon-arrow-left-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-up-line"></span>
            <div class="name">
              arrow-left-up-line
            </div>
            <div class="code-name">.icon-arrow-left-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-circle-fill"></span>
            <div class="name">
              arrow-right-circle-fill
            </div>
            <div class="code-name">.icon-arrow-right-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-up-fill"></span>
            <div class="name">
              arrow-left-up-fill
            </div>
            <div class="code-name">.icon-arrow-left-up-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-left-s-line"></span>
            <div class="name">
              arrow-left-s-line
            </div>
            <div class="code-name">.icon-arrow-left-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-down-fill"></span>
            <div class="name">
              arrow-right-down-fill
            </div>
            <div class="code-name">.icon-arrow-right-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-circle-line"></span>
            <div class="name">
              arrow-right-circle-line
            </div>
            <div class="code-name">.icon-arrow-right-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-down-line"></span>
            <div class="name">
              arrow-right-down-line
            </div>
            <div class="code-name">.icon-arrow-right-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-line"></span>
            <div class="name">
              arrow-right-line
            </div>
            <div class="code-name">.icon-arrow-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-fill"></span>
            <div class="name">
              arrow-right-fill
            </div>
            <div class="code-name">.icon-arrow-right-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-s-fill"></span>
            <div class="name">
              arrow-right-s-fill
            </div>
            <div class="code-name">.icon-arrow-right-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-s-line"></span>
            <div class="name">
              arrow-right-s-line
            </div>
            <div class="code-name">.icon-arrow-right-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-up-fill"></span>
            <div class="name">
              arrow-right-up-fill
            </div>
            <div class="code-name">.icon-arrow-right-up-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-right-up-line"></span>
            <div class="name">
              arrow-right-up-line
            </div>
            <div class="code-name">.icon-arrow-right-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-fill"></span>
            <div class="name">
              arrow-up-fill
            </div>
            <div class="code-name">.icon-arrow-up-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-circle-line"></span>
            <div class="name">
              arrow-up-circle-line
            </div>
            <div class="code-name">.icon-arrow-up-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-s-fill"></span>
            <div class="name">
              arrow-up-s-fill
            </div>
            <div class="code-name">.icon-arrow-up-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-line"></span>
            <div class="name">
              arrow-up-line
            </div>
            <div class="code-name">.icon-arrow-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-circle-fill"></span>
            <div class="name">
              arrow-up-circle-fill
            </div>
            <div class="code-name">.icon-arrow-up-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-arrow-up-s-line"></span>
            <div class="name">
              arrow-up-s-line
            </div>
            <div class="code-name">.icon-arrow-up-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bluetooth-fill"></span>
            <div class="name">
              bluetooth-fill
            </div>
            <div class="code-name">.icon-bluetooth-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-check-fill"></span>
            <div class="name">
              check-fill
            </div>
            <div class="code-name">.icon-check-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-check-line"></span>
            <div class="name">
              check-line
            </div>
            <div class="code-name">.icon-check-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bluetooth-connect-line"></span>
            <div class="name">
              bluetooth-connect-line
            </div>
            <div class="code-name">.icon-bluetooth-connect-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bluetooth-connect-fill"></span>
            <div class="name">
              bluetooth-connect-fill
            </div>
            <div class="code-name">.icon-bluetooth-connect-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bluetooth-line"></span>
            <div class="name">
              bluetooth-line
            </div>
            <div class="code-name">.icon-bluetooth-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-blank-circle-line"></span>
            <div class="name">
              checkbox-blank-circle-line
            </div>
            <div class="code-name">.icon-checkbox-blank-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-blank-fill"></span>
            <div class="name">
              checkbox-blank-fill
            </div>
            <div class="code-name">.icon-checkbox-blank-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-blank-circle-fill"></span>
            <div class="name">
              checkbox-blank-circle-fill
            </div>
            <div class="code-name">.icon-checkbox-blank-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-blank-line"></span>
            <div class="name">
              checkbox-blank-line
            </div>
            <div class="code-name">.icon-checkbox-blank-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-circle-fill"></span>
            <div class="name">
              checkbox-circle-fill
            </div>
            <div class="code-name">.icon-checkbox-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-indeterminate-fill"></span>
            <div class="name">
              checkbox-indeterminate-fill
            </div>
            <div class="code-name">.icon-checkbox-indeterminate-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-indeterminate-line"></span>
            <div class="name">
              checkbox-indeterminate-line
            </div>
            <div class="code-name">.icon-checkbox-indeterminate-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-circle-line"></span>
            <div class="name">
              checkbox-circle-line
            </div>
            <div class="code-name">.icon-checkbox-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-close-circle-fill"></span>
            <div class="name">
              close-circle-fill
            </div>
            <div class="code-name">.icon-close-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-line"></span>
            <div class="name">
              checkbox-line
            </div>
            <div class="code-name">.icon-checkbox-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-close-circle-line"></span>
            <div class="name">
              close-circle-line
            </div>
            <div class="code-name">.icon-close-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-close-line"></span>
            <div class="name">
              close-line
            </div>
            <div class="code-name">.icon-close-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-dashboard-fill"></span>
            <div class="name">
              dashboard-fill
            </div>
            <div class="code-name">.icon-dashboard-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-close-fill"></span>
            <div class="name">
              close-fill
            </div>
            <div class="code-name">.icon-close-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-dashboard-line"></span>
            <div class="name">
              dashboard-line
            </div>
            <div class="code-name">.icon-dashboard-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-back--fill"></span>
            <div class="name">
              delete-back-2-fill
            </div>
            <div class="code-name">.icon-delete-back--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-checkbox-fill"></span>
            <div class="name">
              checkbox-fill
            </div>
            <div class="code-name">.icon-checkbox-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-back-fill"></span>
            <div class="name">
              delete-back-fill
            </div>
            <div class="code-name">.icon-delete-back-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-back-line"></span>
            <div class="name">
              delete-back-line
            </div>
            <div class="code-name">.icon-delete-back-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-back--line"></span>
            <div class="name">
              delete-back-2-line
            </div>
            <div class="code-name">.icon-delete-back--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill"></span>
            <div class="name">
              delete-bin-2-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line"></span>
            <div class="name">
              delete-bin-2-line
            </div>
            <div class="code-name">.icon-delete-bin--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill1"></span>
            <div class="name">
              delete-bin-3-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line1"></span>
            <div class="name">
              delete-bin-3-line
            </div>
            <div class="code-name">.icon-delete-bin--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line2"></span>
            <div class="name">
              delete-bin-6-line
            </div>
            <div class="code-name">.icon-delete-bin--line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line3"></span>
            <div class="name">
              delete-bin-4-line
            </div>
            <div class="code-name">.icon-delete-bin--line3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line4"></span>
            <div class="name">
              delete-bin-5-line
            </div>
            <div class="code-name">.icon-delete-bin--line4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill2"></span>
            <div class="name">
              delete-bin-4-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill3"></span>
            <div class="name">
              delete-bin-6-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin-fill"></span>
            <div class="name">
              delete-bin-fill
            </div>
            <div class="code-name">.icon-delete-bin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill4"></span>
            <div class="name">
              delete-bin-7-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-divide-fill"></span>
            <div class="name">
              divide-fill
            </div>
            <div class="code-name">.icon-divide-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download--line"></span>
            <div class="name">
              download-2-line
            </div>
            <div class="code-name">.icon-download--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-divide-line"></span>
            <div class="name">
              divide-line
            </div>
            <div class="code-name">.icon-divide-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-cloud-fill"></span>
            <div class="name">
              download-cloud-fill
            </div>
            <div class="code-name">.icon-download-cloud-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin-line"></span>
            <div class="name">
              delete-bin-line
            </div>
            <div class="code-name">.icon-delete-bin-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--line5"></span>
            <div class="name">
              delete-bin-7-line
            </div>
            <div class="code-name">.icon-delete-bin--line5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download--fill"></span>
            <div class="name">
              download-2-fill
            </div>
            <div class="code-name">.icon-download--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-fill"></span>
            <div class="name">
              download-fill
            </div>
            <div class="code-name">.icon-download-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-line"></span>
            <div class="name">
              download-line
            </div>
            <div class="code-name">.icon-download-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-error-warning-fill"></span>
            <div class="name">
              error-warning-fill
            </div>
            <div class="code-name">.icon-error-warning-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-download-cloud-line"></span>
            <div class="name">
              download-cloud-line
            </div>
            <div class="code-name">.icon-download-cloud-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-error-warning-line"></span>
            <div class="name">
              error-warning-line
            </div>
            <div class="code-name">.icon-error-warning-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-fill"></span>
            <div class="name">
              eye-fill
            </div>
            <div class="code-name">.icon-eye-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-close-fill"></span>
            <div class="name">
              eye-close-fill
            </div>
            <div class="code-name">.icon-eye-close-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-line"></span>
            <div class="name">
              eye-line
            </div>
            <div class="code-name">.icon-eye-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-off-fill"></span>
            <div class="name">
              eye-off-fill
            </div>
            <div class="code-name">.icon-eye-off-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-close-line"></span>
            <div class="name">
              eye-close-line
            </div>
            <div class="code-name">.icon-eye-close-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-find-replace-fill"></span>
            <div class="name">
              find-replace-fill
            </div>
            <div class="code-name">.icon-find-replace-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-delete-bin--fill5"></span>
            <div class="name">
              delete-bin-5-fill
            </div>
            <div class="code-name">.icon-delete-bin--fill5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-eye-off-line"></span>
            <div class="name">
              eye-off-line
            </div>
            <div class="code-name">.icon-eye-off-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-forbid--fill"></span>
            <div class="name">
              forbid-2-fill
            </div>
            <div class="code-name">.icon-forbid--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-find-replace-line"></span>
            <div class="name">
              find-replace-line
            </div>
            <div class="code-name">.icon-find-replace-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-forbid--line"></span>
            <div class="name">
              forbid-2-line
            </div>
            <div class="code-name">.icon-forbid--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-function-fill"></span>
            <div class="name">
              function-fill
            </div>
            <div class="code-name">.icon-function-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-forbid-fill"></span>
            <div class="name">
              forbid-fill
            </div>
            <div class="code-name">.icon-forbid-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-gps-line"></span>
            <div class="name">
              gps-line
            </div>
            <div class="code-name">.icon-gps-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-forbid-line"></span>
            <div class="name">
              forbid-line
            </div>
            <div class="code-name">.icon-forbid-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-heart--line"></span>
            <div class="name">
              heart-2-line
            </div>
            <div class="code-name">.icon-heart--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-gps-fill"></span>
            <div class="name">
              gps-fill
            </div>
            <div class="code-name">.icon-gps-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-function-line"></span>
            <div class="name">
              function-line
            </div>
            <div class="code-name">.icon-function-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-indeterminate-circle-fill"></span>
            <div class="name">
              indeterminate-circle-fill
            </div>
            <div class="code-name">.icon-indeterminate-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-heart-fill"></span>
            <div class="name">
              heart-fill
            </div>
            <div class="code-name">.icon-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-information-fill"></span>
            <div class="name">
              information-fill
            </div>
            <div class="code-name">.icon-information-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-heart--fill"></span>
            <div class="name">
              heart-2-fill
            </div>
            <div class="code-name">.icon-heart--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-heart-line"></span>
            <div class="name">
              heart-line
            </div>
            <div class="code-name">.icon-heart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-information-line"></span>
            <div class="name">
              information-line
            </div>
            <div class="code-name">.icon-information-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock--fill"></span>
            <div class="name">
              lock-2-fill
            </div>
            <div class="code-name">.icon-lock--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-password-fill"></span>
            <div class="name">
              lock-password-fill
            </div>
            <div class="code-name">.icon-lock-password-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-line"></span>
            <div class="name">
              lock-line
            </div>
            <div class="code-name">.icon-lock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-fill"></span>
            <div class="name">
              lock-fill
            </div>
            <div class="code-name">.icon-lock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock--line"></span>
            <div class="name">
              lock-2-line
            </div>
            <div class="code-name">.icon-lock--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-list-settings-line"></span>
            <div class="name">
              list-settings-line
            </div>
            <div class="code-name">.icon-list-settings-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-password-line"></span>
            <div class="name">
              lock-password-line
            </div>
            <div class="code-name">.icon-lock-password-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-login-box-line"></span>
            <div class="name">
              login-box-line
            </div>
            <div class="code-name">.icon-login-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-login-circle-line"></span>
            <div class="name">
              login-circle-line
            </div>
            <div class="code-name">.icon-login-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-indeterminate-circle-line"></span>
            <div class="name">
              indeterminate-circle-line
            </div>
            <div class="code-name">.icon-indeterminate-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-circle-line"></span>
            <div class="name">
              logout-circle-line
            </div>
            <div class="code-name">.icon-logout-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu--line"></span>
            <div class="name">
              menu-3-line
            </div>
            <div class="code-name">.icon-menu--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu--line1"></span>
            <div class="name">
              menu-2-line
            </div>
            <div class="code-name">.icon-menu--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu--fill"></span>
            <div class="name">
              menu-3-fill
            </div>
            <div class="code-name">.icon-menu--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu--fill1"></span>
            <div class="name">
              menu-2-fill
            </div>
            <div class="code-name">.icon-menu--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-unlock-fill"></span>
            <div class="name">
              lock-unlock-fill
            </div>
            <div class="code-name">.icon-lock-unlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-list-settings-fill"></span>
            <div class="name">
              list-settings-fill
            </div>
            <div class="code-name">.icon-list-settings-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-login-box-fill"></span>
            <div class="name">
              login-box-fill
            </div>
            <div class="code-name">.icon-login-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-lock-unlock-line"></span>
            <div class="name">
              lock-unlock-line
            </div>
            <div class="code-name">.icon-lock-unlock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-login-circle-fill"></span>
            <div class="name">
              login-circle-fill
            </div>
            <div class="code-name">.icon-login-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu-line"></span>
            <div class="name">
              menu-line
            </div>
            <div class="code-name">.icon-menu-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-menu-fill"></span>
            <div class="name">
              menu-fill
            </div>
            <div class="code-name">.icon-menu-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-more--fill"></span>
            <div class="name">
              more-2-fill
            </div>
            <div class="code-name">.icon-more--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-box-line"></span>
            <div class="name">
              logout-box-line
            </div>
            <div class="code-name">.icon-logout-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-more--line"></span>
            <div class="name">
              more-2-line
            </div>
            <div class="code-name">.icon-more--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-circle-fill"></span>
            <div class="name">
              logout-circle-fill
            </div>
            <div class="code-name">.icon-logout-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-scan--fill"></span>
            <div class="name">
              qr-scan-2-fill
            </div>
            <div class="code-name">.icon-qr-scan--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-scan--line"></span>
            <div class="name">
              qr-scan-2-line
            </div>
            <div class="code-name">.icon-qr-scan--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-code-fill"></span>
            <div class="name">
              qr-code-fill
            </div>
            <div class="code-name">.icon-qr-code-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-more-fill"></span>
            <div class="name">
              more-fill
            </div>
            <div class="code-name">.icon-more-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-more-line"></span>
            <div class="name">
              more-line
            </div>
            <div class="code-name">.icon-more-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-code-line"></span>
            <div class="name">
              qr-code-line
            </div>
            <div class="code-name">.icon-qr-code-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-logout-box-fill"></span>
            <div class="name">
              logout-box-fill
            </div>
            <div class="code-name">.icon-logout-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--fill"></span>
            <div class="name">
              settings-2-fill
            </div>
            <div class="code-name">.icon-settings--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search-line"></span>
            <div class="name">
              search-line
            </div>
            <div class="code-name">.icon-search-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--line"></span>
            <div class="name">
              settings-2-line
            </div>
            <div class="code-name">.icon-settings--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--fill1"></span>
            <div class="name">
              settings-3-fill
            </div>
            <div class="code-name">.icon-settings--fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--line1"></span>
            <div class="name">
              settings-3-line
            </div>
            <div class="code-name">.icon-settings--line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--line2"></span>
            <div class="name">
              settings-4-line
            </div>
            <div class="code-name">.icon-settings--line2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--fill2"></span>
            <div class="name">
              settings-5-fill
            </div>
            <div class="code-name">.icon-settings--fill2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--fill3"></span>
            <div class="name">
              settings-4-fill
            </div>
            <div class="code-name">.icon-settings--fill3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--fill4"></span>
            <div class="name">
              settings-6-fill
            </div>
            <div class="code-name">.icon-settings--fill4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-scan-line"></span>
            <div class="name">
              qr-scan-line
            </div>
            <div class="code-name">.icon-qr-scan-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--line3"></span>
            <div class="name">
              settings-6-line
            </div>
            <div class="code-name">.icon-settings--line3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-qr-scan-fill"></span>
            <div class="name">
              qr-scan-fill
            </div>
            <div class="code-name">.icon-qr-scan-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings-fill"></span>
            <div class="name">
              settings-fill
            </div>
            <div class="code-name">.icon-settings-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-question-fill"></span>
            <div class="name">
              question-fill
            </div>
            <div class="code-name">.icon-question-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-question-line"></span>
            <div class="name">
              question-line
            </div>
            <div class="code-name">.icon-question-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-refresh-fill"></span>
            <div class="name">
              refresh-fill
            </div>
            <div class="code-name">.icon-refresh-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-radio-button-fill"></span>
            <div class="name">
              radio-button-fill
            </div>
            <div class="code-name">.icon-radio-button-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-refresh-line"></span>
            <div class="name">
              refresh-line
            </div>
            <div class="code-name">.icon-refresh-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings--line4"></span>
            <div class="name">
              settings-5-line
            </div>
            <div class="code-name">.icon-settings--line4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-restart-fill"></span>
            <div class="name">
              restart-fill
            </div>
            <div class="code-name">.icon-restart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-rss-fill"></span>
            <div class="name">
              rss-fill
            </div>
            <div class="code-name">.icon-rss-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-restart-line"></span>
            <div class="name">
              restart-line
            </div>
            <div class="code-name">.icon-restart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-radio-button-line"></span>
            <div class="name">
              radio-button-line
            </div>
            <div class="code-name">.icon-radio-button-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-rss-line"></span>
            <div class="name">
              rss-line
            </div>
            <div class="code-name">.icon-rss-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scan-fill"></span>
            <div class="name">
              scan-fill
            </div>
            <div class="code-name">.icon-scan-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scan--line"></span>
            <div class="name">
              scan-2-line
            </div>
            <div class="code-name">.icon-scan--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scan-line"></span>
            <div class="name">
              scan-line
            </div>
            <div class="code-name">.icon-scan-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search--fill"></span>
            <div class="name">
              search-2-fill
            </div>
            <div class="code-name">.icon-search--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search--line"></span>
            <div class="name">
              search-2-line
            </div>
            <div class="code-name">.icon-search--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search-fill"></span>
            <div class="name">
              search-fill
            </div>
            <div class="code-name">.icon-search-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search-eye-fill"></span>
            <div class="name">
              search-eye-fill
            </div>
            <div class="code-name">.icon-search-eye-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-search-eye-line"></span>
            <div class="name">
              search-eye-line
            </div>
            <div class="code-name">.icon-search-eye-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-settings-line"></span>
            <div class="name">
              settings-line
            </div>
            <div class="code-name">.icon-settings-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-side-bar-line"></span>
            <div class="name">
              side-bar-line
            </div>
            <div class="code-name">.icon-side-bar-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-fill"></span>
            <div class="name">
              star-fill
            </div>
            <div class="code-name">.icon-star-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-scan--fill"></span>
            <div class="name">
              scan-2-fill
            </div>
            <div class="code-name">.icon-scan--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-subtract-line"></span>
            <div class="name">
              subtract-line
            </div>
            <div class="code-name">.icon-subtract-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-subtract-fill"></span>
            <div class="name">
              subtract-fill
            </div>
            <div class="code-name">.icon-subtract-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-thumb-down-fill"></span>
            <div class="name">
              thumb-down-fill
            </div>
            <div class="code-name">.icon-thumb-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-thumb-down-line"></span>
            <div class="name">
              thumb-down-line
            </div>
            <div class="code-name">.icon-thumb-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-time-line"></span>
            <div class="name">
              time-line
            </div>
            <div class="code-name">.icon-time-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer--fill"></span>
            <div class="name">
              timer-2-fill
            </div>
            <div class="code-name">.icon-timer--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-box-fill"></span>
            <div class="name">
              share-box-fill
            </div>
            <div class="code-name">.icon-share-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-box-line"></span>
            <div class="name">
              share-box-line
            </div>
            <div class="code-name">.icon-share-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward--line"></span>
            <div class="name">
              share-forward-2-line
            </div>
            <div class="code-name">.icon-share-forward--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward--fill"></span>
            <div class="name">
              share-forward-2-fill
            </div>
            <div class="code-name">.icon-share-forward--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-fill"></span>
            <div class="name">
              share-fill
            </div>
            <div class="code-name">.icon-share-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-circle-fill"></span>
            <div class="name">
              share-circle-fill
            </div>
            <div class="code-name">.icon-share-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward-fill"></span>
            <div class="name">
              share-forward-fill
            </div>
            <div class="code-name">.icon-share-forward-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward-box-line"></span>
            <div class="name">
              share-forward-box-line
            </div>
            <div class="code-name">.icon-share-forward-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-line"></span>
            <div class="name">
              share-line
            </div>
            <div class="code-name">.icon-share-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward-line"></span>
            <div class="name">
              share-forward-line
            </div>
            <div class="code-name">.icon-share-forward-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-cross-line"></span>
            <div class="name">
              shield-cross-line
            </div>
            <div class="code-name">.icon-shield-cross-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-flash-line"></span>
            <div class="name">
              shield-flash-line
            </div>
            <div class="code-name">.icon-shield-flash-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-line"></span>
            <div class="name">
              shield-line
            </div>
            <div class="code-name">.icon-shield-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shut-down-fill"></span>
            <div class="name">
              shut-down-fill
            </div>
            <div class="code-name">.icon-shut-down-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shut-down-line"></span>
            <div class="name">
              shut-down-line
            </div>
            <div class="code-name">.icon-shut-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-side-bar-fill"></span>
            <div class="name">
              side-bar-fill
            </div>
            <div class="code-name">.icon-side-bar-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload--fill"></span>
            <div class="name">
              upload-2-fill
            </div>
            <div class="code-name">.icon-upload--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-cloud-fill"></span>
            <div class="name">
              upload-cloud-fill
            </div>
            <div class="code-name">.icon-upload-cloud-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-cloud-line"></span>
            <div class="name">
              upload-cloud-line
            </div>
            <div class="code-name">.icon-upload-cloud-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer-line"></span>
            <div class="name">
              timer-line
            </div>
            <div class="code-name">.icon-timer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-line"></span>
            <div class="name">
              upload-line
            </div>
            <div class="code-name">.icon-upload-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload-fill"></span>
            <div class="name">
              upload-fill
            </div>
            <div class="code-name">.icon-upload-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-wifi-line"></span>
            <div class="name">
              wifi-line
            </div>
            <div class="code-name">.icon-wifi-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-zoom-out-fill"></span>
            <div class="name">
              zoom-out-fill
            </div>
            <div class="code-name">.icon-zoom-out-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-zoom-out-line"></span>
            <div class="name">
              zoom-out-line
            </div>
            <div class="code-name">.icon-zoom-out-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-s-fill"></span>
            <div class="name">
              star-s-fill
            </div>
            <div class="code-name">.icon-star-s-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-thumb-up-fill"></span>
            <div class="name">
              thumb-up-fill
            </div>
            <div class="code-name">.icon-thumb-up-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-s-line"></span>
            <div class="name">
              star-s-line
            </div>
            <div class="code-name">.icon-star-s-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-fill"></span>
            <div class="name">
              shield-fill
            </div>
            <div class="code-name">.icon-shield-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-time-fill"></span>
            <div class="name">
              time-fill
            </div>
            <div class="code-name">.icon-time-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer--line"></span>
            <div class="name">
              timer-2-line
            </div>
            <div class="code-name">.icon-timer--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-cross-fill"></span>
            <div class="name">
              shield-cross-fill
            </div>
            <div class="code-name">.icon-shield-cross-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-shield-flash-fill"></span>
            <div class="name">
              shield-flash-fill
            </div>
            <div class="code-name">.icon-shield-flash-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-circle-line"></span>
            <div class="name">
              share-circle-line
            </div>
            <div class="code-name">.icon-share-circle-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-wifi-fill"></span>
            <div class="name">
              wifi-fill
            </div>
            <div class="code-name">.icon-wifi-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-timer-fill"></span>
            <div class="name">
              timer-fill
            </div>
            <div class="code-name">.icon-timer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-zoom-in-fill"></span>
            <div class="name">
              zoom-in-fill
            </div>
            <div class="code-name">.icon-zoom-in-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-zoom-in-line"></span>
            <div class="name">
              zoom-in-line
            </div>
            <div class="code-name">.icon-zoom-in-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-share-forward-box-fill"></span>
            <div class="name">
              share-forward-box-fill
            </div>
            <div class="code-name">.icon-share-forward-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-star-line"></span>
            <div class="name">
              star-line
            </div>
            <div class="code-name">.icon-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-thumb-up-line"></span>
            <div class="name">
              thumb-up-line
            </div>
            <div class="code-name">.icon-thumb-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-upload--line"></span>
            <div class="name">
              upload-2-line
            </div>
            <div class="code-name">.icon-upload--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-calendar-check-line"></span>
            <div class="name">
              calendar-check-line
            </div>
            <div class="code-name">.icon-calendar-check-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-calendar-check-fill"></span>
            <div class="name">
              calendar-check-fill
            </div>
            <div class="code-name">.icon-calendar-check-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-cloud-off-fill"></span>
            <div class="name">
              cloud-off-fill
            </div>
            <div class="code-name">.icon-cloud-off-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-cloud-off-line"></span>
            <div class="name">
              cloud-off-line
            </div>
            <div class="code-name">.icon-cloud-off-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-horizontal-line"></span>
            <div class="name">
              bar-chart-horizontal-line
            </div>
            <div class="code-name">.icon-bar-chart-horizontal-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-grouped-line"></span>
            <div class="name">
              bar-chart-grouped-line
            </div>
            <div class="code-name">.icon-bar-chart-grouped-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-grouped-fill"></span>
            <div class="name">
              bar-chart-grouped-fill
            </div>
            <div class="code-name">.icon-bar-chart-grouped-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-add-line"></span>
            <div class="name">
              mail-add-line
            </div>
            <div class="code-name">.icon-mail-add-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-horizontal-fill"></span>
            <div class="name">
              bar-chart-horizontal-fill
            </div>
            <div class="code-name">.icon-bar-chart-horizontal-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-add-fill"></span>
            <div class="name">
              mail-add-fill
            </div>
            <div class="code-name">.icon-mail-add-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-check-fill"></span>
            <div class="name">
              mail-check-fill
            </div>
            <div class="code-name">.icon-mail-check-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-check-line"></span>
            <div class="name">
              mail-check-line
            </div>
            <div class="code-name">.icon-mail-check-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-close-fill"></span>
            <div class="name">
              mail-close-fill
            </div>
            <div class="code-name">.icon-mail-close-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-close-line"></span>
            <div class="name">
              mail-close-line
            </div>
            <div class="code-name">.icon-mail-close-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-download-fill"></span>
            <div class="name">
              mail-download-fill
            </div>
            <div class="code-name">.icon-mail-download-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-download-line"></span>
            <div class="name">
              mail-download-line
            </div>
            <div class="code-name">.icon-mail-download-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-forbid-line"></span>
            <div class="name">
              mail-forbid-line
            </div>
            <div class="code-name">.icon-mail-forbid-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-forbid-fill"></span>
            <div class="name">
              mail-forbid-fill
            </div>
            <div class="code-name">.icon-mail-forbid-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-lock-fill"></span>
            <div class="name">
              mail-lock-fill
            </div>
            <div class="code-name">.icon-mail-lock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-lock-line"></span>
            <div class="name">
              mail-lock-line
            </div>
            <div class="code-name">.icon-mail-lock-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-star-fill"></span>
            <div class="name">
              mail-star-fill
            </div>
            <div class="code-name">.icon-mail-star-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-star-line"></span>
            <div class="name">
              mail-star-line
            </div>
            <div class="code-name">.icon-mail-star-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-settings-fill"></span>
            <div class="name">
              mail-settings-fill
            </div>
            <div class="code-name">.icon-mail-settings-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-archive-drawer-line"></span>
            <div class="name">
              archive-drawer-line
            </div>
            <div class="code-name">.icon-archive-drawer-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-at-fill"></span>
            <div class="name">
              at-fill
            </div>
            <div class="code-name">.icon-at-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-archive-drawer-fill"></span>
            <div class="name">
              archive-drawer-fill
            </div>
            <div class="code-name">.icon-archive-drawer-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-attachment-line"></span>
            <div class="name">
              attachment-line
            </div>
            <div class="code-name">.icon-attachment-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-archive-fill"></span>
            <div class="name">
              archive-fill
            </div>
            <div class="code-name">.icon-archive-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-mail-settings-line"></span>
            <div class="name">
              mail-settings-line
            </div>
            <div class="code-name">.icon-mail-settings-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-at-line"></span>
            <div class="name">
              at-line
            </div>
            <div class="code-name">.icon-at-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart--fill"></span>
            <div class="name">
              bar-chart-2-fill
            </div>
            <div class="code-name">.icon-bar-chart--fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-award-fill"></span>
            <div class="name">
              award-fill
            </div>
            <div class="code-name">.icon-award-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart--line"></span>
            <div class="name">
              bar-chart-2-line
            </div>
            <div class="code-name">.icon-bar-chart--line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-box-line"></span>
            <div class="name">
              bar-chart-box-line
            </div>
            <div class="code-name">.icon-bar-chart-box-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-bar-chart-fill"></span>
            <div class="name">
              bar-chart-fill
            </div>
            <div class="code-name">.icon-bar-chart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon icon-attachment-fill"></span>
            <div class="name">
              attachment-fill
            </div>
            <div class="code-name">.icon-attachment-fill
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./layui-icon.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="layui-icon icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            layui-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "layui-icon"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hammer-line"></use>
                </svg>
                <div class="name">hammer-line</div>
                <div class="code-name">#icon-hammer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hammer-fill"></use>
                </svg>
                <div class="name">hammer-fill</div>
                <div class="code-name">#icon-hammer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tools-fill"></use>
                </svg>
                <div class="name">tools-fill</div>
                <div class="code-name">#icon-tools-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tools-line"></use>
                </svg>
                <div class="name">tools-line</div>
                <div class="code-name">#icon-tools-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markup-line"></use>
                </svg>
                <div class="name">markup-line</div>
                <div class="code-name">#icon-markup-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slice-fill"></use>
                </svg>
                <div class="name">slice-fill</div>
                <div class="code-name">#icon-slice-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slice-line"></use>
                </svg>
                <div class="name">slice-line</div>
                <div class="code-name">#icon-slice-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markup-fill"></use>
                </svg>
                <div class="name">markup-fill</div>
                <div class="code-name">#icon-markup-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-row-fill"></use>
                </svg>
                <div class="name">layout-row-fill</div>
                <div class="code-name">#icon-layout-row-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-row-line"></use>
                </svg>
                <div class="name">layout-row-line</div>
                <div class="code-name">#icon-layout-row-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-column-fill"></use>
                </svg>
                <div class="name">layout-column-fill</div>
                <div class="code-name">#icon-layout-column-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise-fill"></use>
                </svg>
                <div class="name">clockwise-fill</div>
                <div class="code-name">#icon-clockwise-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise--fill"></use>
                </svg>
                <div class="name">clockwise-2-fill</div>
                <div class="code-name">#icon-clockwise--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise-line"></use>
                </svg>
                <div class="name">clockwise-line</div>
                <div class="code-name">#icon-clockwise-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise-fill"></use>
                </svg>
                <div class="name">anticlockwise-fill</div>
                <div class="code-name">#icon-anticlockwise-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise-line"></use>
                </svg>
                <div class="name">anticlockwise-line</div>
                <div class="code-name">#icon-anticlockwise-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-column-line"></use>
                </svg>
                <div class="name">layout-column-line</div>
                <div class="code-name">#icon-layout-column-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise--fill"></use>
                </svg>
                <div class="name">anticlockwise-2-fill</div>
                <div class="code-name">#icon-anticlockwise--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contrast-drop-fill"></use>
                </svg>
                <div class="name">contrast-drop-fill</div>
                <div class="code-name">#icon-contrast-drop-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise--line"></use>
                </svg>
                <div class="name">anticlockwise-2-line</div>
                <div class="code-name">#icon-anticlockwise--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasses--fill"></use>
                </svg>
                <div class="name">compasses-2-fill</div>
                <div class="code-name">#icon-compasses--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise--line"></use>
                </svg>
                <div class="name">clockwise-2-line</div>
                <div class="code-name">#icon-clockwise--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-magic-fill"></use>
                </svg>
                <div class="name">magic-fill</div>
                <div class="code-name">#icon-magic-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-magic-line"></use>
                </svg>
                <div class="name">magic-line</div>
                <div class="code-name">#icon-magic-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasses-fill"></use>
                </svg>
                <div class="name">compasses-fill</div>
                <div class="code-name">#icon-compasses-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot--line"></use>
                </svg>
                <div class="name">screenshot-2-line</div>
                <div class="code-name">#icon-screenshot--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot--fill"></use>
                </svg>
                <div class="name">screenshot-2-fill</div>
                <div class="code-name">#icon-screenshot--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard--fill"></use>
                </svg>
                <div class="name">artboard-2-fill</div>
                <div class="code-name">#icon-artboard--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot-line"></use>
                </svg>
                <div class="name">screenshot-line</div>
                <div class="code-name">#icon-screenshot-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard-line"></use>
                </svg>
                <div class="name">artboard-line</div>
                <div class="code-name">#icon-artboard-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard-fill"></use>
                </svg>
                <div class="name">artboard-fill</div>
                <div class="code-name">#icon-artboard-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard--line"></use>
                </svg>
                <div class="name">artboard-2-line</div>
                <div class="code-name">#icon-artboard--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-blur-off-line"></use>
                </svg>
                <div class="name">blur-off-line</div>
                <div class="code-name">#icon-blur-off-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill"></use>
                </svg>
                <div class="name">brush-4-fill</div>
                <div class="code-name">#icon-brush--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-blur-off-fill"></use>
                </svg>
                <div class="name">blur-off-fill</div>
                <div class="code-name">#icon-blur-off-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line"></use>
                </svg>
                <div class="name">brush-3-line</div>
                <div class="code-name">#icon-brush--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ball-pen-fill"></use>
                </svg>
                <div class="name">ball-pen-fill</div>
                <div class="code-name">#icon-ball-pen-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush-line"></use>
                </svg>
                <div class="name">brush-line</div>
                <div class="code-name">#icon-brush-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line1"></use>
                </svg>
                <div class="name">brush-4-line</div>
                <div class="code-name">#icon-brush--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ball-pen-line"></use>
                </svg>
                <div class="name">ball-pen-line</div>
                <div class="code-name">#icon-ball-pen-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot-fill"></use>
                </svg>
                <div class="name">screenshot-fill</div>
                <div class="code-name">#icon-screenshot-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill1"></use>
                </svg>
                <div class="name">brush-2-fill</div>
                <div class="code-name">#icon-brush--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush-fill"></use>
                </svg>
                <div class="name">brush-fill</div>
                <div class="code-name">#icon-brush-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill2"></use>
                </svg>
                <div class="name">brush-3-fill</div>
                <div class="code-name">#icon-brush--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line2"></use>
                </svg>
                <div class="name">brush-2-line</div>
                <div class="code-name">#icon-brush--line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hammer-line1"></use>
                </svg>
                <div class="name">hammer-line</div>
                <div class="code-name">#icon-hammer-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hammer-fill1"></use>
                </svg>
                <div class="name">hammer-fill</div>
                <div class="code-name">#icon-hammer-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markup-line1"></use>
                </svg>
                <div class="name">markup-line</div>
                <div class="code-name">#icon-markup-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slice-fill1"></use>
                </svg>
                <div class="name">slice-fill</div>
                <div class="code-name">#icon-slice-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tools-line1"></use>
                </svg>
                <div class="name">tools-line</div>
                <div class="code-name">#icon-tools-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tools-fill1"></use>
                </svg>
                <div class="name">tools-fill</div>
                <div class="code-name">#icon-tools-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-row-line1"></use>
                </svg>
                <div class="name">layout-row-line</div>
                <div class="code-name">#icon-layout-row-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-row-fill1"></use>
                </svg>
                <div class="name">layout-row-fill</div>
                <div class="code-name">#icon-layout-row-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-column-line1"></use>
                </svg>
                <div class="name">layout-column-line</div>
                <div class="code-name">#icon-layout-column-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markup-fill1"></use>
                </svg>
                <div class="name">markup-fill</div>
                <div class="code-name">#icon-markup-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise-fill1"></use>
                </svg>
                <div class="name">clockwise-fill</div>
                <div class="code-name">#icon-clockwise-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise--fill1"></use>
                </svg>
                <div class="name">clockwise-2-fill</div>
                <div class="code-name">#icon-clockwise--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise-fill1"></use>
                </svg>
                <div class="name">anticlockwise-fill</div>
                <div class="code-name">#icon-anticlockwise-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layout-column-fill1"></use>
                </svg>
                <div class="name">layout-column-fill</div>
                <div class="code-name">#icon-layout-column-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise-line1"></use>
                </svg>
                <div class="name">clockwise-line</div>
                <div class="code-name">#icon-clockwise-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slice-line1"></use>
                </svg>
                <div class="name">slice-line</div>
                <div class="code-name">#icon-slice-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contrast-drop-fill1"></use>
                </svg>
                <div class="name">contrast-drop-fill</div>
                <div class="code-name">#icon-contrast-drop-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasses--fill1"></use>
                </svg>
                <div class="name">compasses-2-fill</div>
                <div class="code-name">#icon-compasses--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasses-fill1"></use>
                </svg>
                <div class="name">compasses-fill</div>
                <div class="code-name">#icon-compasses-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockwise--line1"></use>
                </svg>
                <div class="name">clockwise-2-line</div>
                <div class="code-name">#icon-clockwise--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise-line1"></use>
                </svg>
                <div class="name">anticlockwise-line</div>
                <div class="code-name">#icon-anticlockwise-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise--line1"></use>
                </svg>
                <div class="name">anticlockwise-2-line</div>
                <div class="code-name">#icon-anticlockwise--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot--line1"></use>
                </svg>
                <div class="name">screenshot-2-line</div>
                <div class="code-name">#icon-screenshot--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-magic-fill1"></use>
                </svg>
                <div class="name">magic-fill</div>
                <div class="code-name">#icon-magic-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot--fill1"></use>
                </svg>
                <div class="name">screenshot-2-fill</div>
                <div class="code-name">#icon-screenshot--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard--fill1"></use>
                </svg>
                <div class="name">artboard-2-fill</div>
                <div class="code-name">#icon-artboard--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-screenshot-line1"></use>
                </svg>
                <div class="name">screenshot-line</div>
                <div class="code-name">#icon-screenshot-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ball-pen-fill1"></use>
                </svg>
                <div class="name">ball-pen-fill</div>
                <div class="code-name">#icon-ball-pen-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard--line1"></use>
                </svg>
                <div class="name">artboard-2-line</div>
                <div class="code-name">#icon-artboard--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard-fill1"></use>
                </svg>
                <div class="name">artboard-fill</div>
                <div class="code-name">#icon-artboard-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-blur-off-line1"></use>
                </svg>
                <div class="name">blur-off-line</div>
                <div class="code-name">#icon-blur-off-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anticlockwise--fill1"></use>
                </svg>
                <div class="name">anticlockwise-2-fill</div>
                <div class="code-name">#icon-anticlockwise--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill3"></use>
                </svg>
                <div class="name">brush-2-fill</div>
                <div class="code-name">#icon-brush--fill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ball-pen-line1"></use>
                </svg>
                <div class="name">ball-pen-line</div>
                <div class="code-name">#icon-ball-pen-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line3"></use>
                </svg>
                <div class="name">brush-3-line</div>
                <div class="code-name">#icon-brush--line3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill4"></use>
                </svg>
                <div class="name">brush-3-fill</div>
                <div class="code-name">#icon-brush--fill4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line4"></use>
                </svg>
                <div class="name">brush-2-line</div>
                <div class="code-name">#icon-brush--line4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush-fill1"></use>
                </svg>
                <div class="name">brush-fill</div>
                <div class="code-name">#icon-brush-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-artboard-line1"></use>
                </svg>
                <div class="name">artboard-line</div>
                <div class="code-name">#icon-artboard-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-magic-line1"></use>
                </svg>
                <div class="name">magic-line</div>
                <div class="code-name">#icon-magic-line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--fill5"></use>
                </svg>
                <div class="name">brush-4-fill</div>
                <div class="code-name">#icon-brush--fill5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-contrast-fill"></use>
                </svg>
                <div class="name">contrast-fill</div>
                <div class="code-name">#icon-contrast-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush--line5"></use>
                </svg>
                <div class="name">brush-4-line</div>
                <div class="code-name">#icon-brush--line5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasses--line"></use>
                </svg>
                <div class="name">compasses-2-line</div>
                <div class="code-name">#icon-compasses--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scissors--fill"></use>
                </svg>
                <div class="name">scissors-2-fill</div>
                <div class="code-name">#icon-scissors--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shape--line"></use>
                </svg>
                <div class="name">shape-2-line</div>
                <div class="code-name">#icon-shape--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table-fill"></use>
                </svg>
                <div class="name">table-fill</div>
                <div class="code-name">#icon-table-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sip-fill"></use>
                </svg>
                <div class="name">sip-fill</div>
                <div class="code-name">#icon-sip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scissors-line"></use>
                </svg>
                <div class="name">scissors-line</div>
                <div class="code-name">#icon-scissors-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sip-line"></use>
                </svg>
                <div class="name">sip-line</div>
                <div class="code-name">#icon-sip-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-keyhole-line"></use>
                </svg>
                <div class="name">shield-keyhole-line</div>
                <div class="code-name">#icon-shield-keyhole-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-cloud--fill"></use>
                </svg>
                <div class="name">download-cloud-2-fill</div>
                <div class="code-name">#icon-download-cloud--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-cloud--line"></use>
                </svg>
                <div class="name">download-cloud-2-line</div>
                <div class="code-name">#icon-download-cloud--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-external-link-fill"></use>
                </svg>
                <div class="name">external-link-fill</div>
                <div class="code-name">#icon-external-link-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-external-link-line"></use>
                </svg>
                <div class="name">external-link-line</div>
                <div class="code-name">#icon-external-link-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fingerprint--line"></use>
                </svg>
                <div class="name">fingerprint-2-line</div>
                <div class="code-name">#icon-fingerprint--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fingerprint--fill"></use>
                </svg>
                <div class="name">fingerprint-2-fill</div>
                <div class="code-name">#icon-fingerprint--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-box-r-fill"></use>
                </svg>
                <div class="name">logout-box-r-fill</div>
                <div class="code-name">#icon-logout-box-r-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fingerprint-fill"></use>
                </svg>
                <div class="name">fingerprint-fill</div>
                <div class="code-name">#icon-fingerprint-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-circle-r-fill"></use>
                </svg>
                <div class="name">logout-circle-r-fill</div>
                <div class="code-name">#icon-logout-circle-r-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-box-r-line"></use>
                </svg>
                <div class="name">logout-box-r-line</div>
                <div class="code-name">#icon-logout-box-r-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-keyhole-fill"></use>
                </svg>
                <div class="name">shield-keyhole-fill</div>
                <div class="code-name">#icon-shield-keyhole-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-circle-r-line"></use>
                </svg>
                <div class="name">logout-circle-r-line</div>
                <div class="code-name">#icon-logout-circle-r-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-cloud--fill"></use>
                </svg>
                <div class="name">upload-cloud-2-fill</div>
                <div class="code-name">#icon-upload-cloud--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fingerprint-line"></use>
                </svg>
                <div class="name">fingerprint-line</div>
                <div class="code-name">#icon-fingerprint-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-cloud--line"></use>
                </svg>
                <div class="name">upload-cloud-2-line</div>
                <div class="code-name">#icon-upload-cloud--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-off-fill"></use>
                </svg>
                <div class="name">wifi-off-fill</div>
                <div class="code-name">#icon-wifi-off-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copyright-fill"></use>
                </svg>
                <div class="name">copyright-fill</div>
                <div class="code-name">#icon-copyright-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copyright-line"></use>
                </svg>
                <div class="name">copyright-line</div>
                <div class="code-name">#icon-copyright-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-off-line"></use>
                </svg>
                <div class="name">wifi-off-line</div>
                <div class="code-name">#icon-wifi-off-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-multiple-blank-line"></use>
                </svg>
                <div class="name">checkbox-multiple-blank-line</div>
                <div class="code-name">#icon-checkbox-multiple-blank-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-multiple-blank-fill"></use>
                </svg>
                <div class="name">checkbox-multiple-blank-fill</div>
                <div class="code-name">#icon-checkbox-multiple-blank-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-multiple-fill"></use>
                </svg>
                <div class="name">checkbox-multiple-fill</div>
                <div class="code-name">#icon-checkbox-multiple-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--fill"></use>
                </svg>
                <div class="name">loader-3-fill</div>
                <div class="code-name">#icon-loader--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--fill1"></use>
                </svg>
                <div class="name">loader-2-fill</div>
                <div class="code-name">#icon-loader--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--line"></use>
                </svg>
                <div class="name">loader-2-line</div>
                <div class="code-name">#icon-loader--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--line1"></use>
                </svg>
                <div class="name">loader-3-line</div>
                <div class="code-name">#icon-loader--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-multiple-line"></use>
                </svg>
                <div class="name">checkbox-multiple-line</div>
                <div class="code-name">#icon-checkbox-multiple-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--fill2"></use>
                </svg>
                <div class="name">loader-4-fill</div>
                <div class="code-name">#icon-loader--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--line2"></use>
                </svg>
                <div class="name">loader-4-line</div>
                <div class="code-name">#icon-loader--line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--fill3"></use>
                </svg>
                <div class="name">loader-5-fill</div>
                <div class="code-name">#icon-loader--fill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader--line3"></use>
                </svg>
                <div class="name">loader-5-line</div>
                <div class="code-name">#icon-loader--line3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader-fill"></use>
                </svg>
                <div class="name">loader-fill</div>
                <div class="code-name">#icon-loader-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert-fill"></use>
                </svg>
                <div class="name">alert-fill</div>
                <div class="code-name">#icon-alert-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loader-line"></use>
                </svg>
                <div class="name">loader-line</div>
                <div class="code-name">#icon-loader-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam--fill"></use>
                </svg>
                <div class="name">spam-2-fill</div>
                <div class="code-name">#icon-spam--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam--line"></use>
                </svg>
                <div class="name">spam-2-line</div>
                <div class="code-name">#icon-spam--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam--line1"></use>
                </svg>
                <div class="name">spam-3-line</div>
                <div class="code-name">#icon-spam--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam-fill"></use>
                </svg>
                <div class="name">spam-fill</div>
                <div class="code-name">#icon-spam-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam-line"></use>
                </svg>
                <div class="name">spam-line</div>
                <div class="code-name">#icon-spam-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert-line"></use>
                </svg>
                <div class="name">alert-line</div>
                <div class="code-name">#icon-alert-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter-fill"></use>
                </svg>
                <div class="name">filter-fill</div>
                <div class="code-name">#icon-filter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter-line"></use>
                </svg>
                <div class="name">filter-line</div>
                <div class="code-name">#icon-filter-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-user-line"></use>
                </svg>
                <div class="name">shield-user-line</div>
                <div class="code-name">#icon-shield-user-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-flash-fill"></use>
                </svg>
                <div class="name">timer-flash-fill</div>
                <div class="code-name">#icon-timer-flash-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-user-fill"></use>
                </svg>
                <div class="name">shield-user-fill</div>
                <div class="code-name">#icon-shield-user-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter--fill"></use>
                </svg>
                <div class="name">filter-2-fill</div>
                <div class="code-name">#icon-filter--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter--line"></use>
                </svg>
                <div class="name">filter-2-line</div>
                <div class="code-name">#icon-filter--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter--line1"></use>
                </svg>
                <div class="name">filter-3-line</div>
                <div class="code-name">#icon-filter--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-half-fill"></use>
                </svg>
                <div class="name">star-half-fill</div>
                <div class="code-name">#icon-star-half-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barcode-box-fill"></use>
                </svg>
                <div class="name">barcode-box-fill</div>
                <div class="code-name">#icon-barcode-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-flash-line"></use>
                </svg>
                <div class="name">timer-flash-line</div>
                <div class="code-name">#icon-timer-flash-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spam--fill1"></use>
                </svg>
                <div class="name">spam-3-fill</div>
                <div class="code-name">#icon-spam--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barcode-box-line"></use>
                </svg>
                <div class="name">barcode-box-line</div>
                <div class="code-name">#icon-barcode-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter--fill1"></use>
                </svg>
                <div class="name">filter-3-fill</div>
                <div class="code-name">#icon-filter--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-double-fill"></use>
                </svg>
                <div class="name">check-double-fill</div>
                <div class="code-name">#icon-check-double-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-double-line"></use>
                </svg>
                <div class="name">check-double-line</div>
                <div class="code-name">#icon-check-double-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-half-s-fill"></use>
                </svg>
                <div class="name">star-half-s-fill</div>
                <div class="code-name">#icon-star-half-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-star-line"></use>
                </svg>
                <div class="name">shield-star-line</div>
                <div class="code-name">#icon-shield-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-star-fill"></use>
                </svg>
                <div class="name">shield-star-fill</div>
                <div class="code-name">#icon-shield-star-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-half-line"></use>
                </svg>
                <div class="name">star-half-line</div>
                <div class="code-name">#icon-star-half-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toggle-fill"></use>
                </svg>
                <div class="name">toggle-fill</div>
                <div class="code-name">#icon-toggle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toggle-line"></use>
                </svg>
                <div class="name">toggle-line</div>
                <div class="code-name">#icon-toggle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-half-s-line"></use>
                </svg>
                <div class="name">star-half-s-line</div>
                <div class="code-name">#icon-star-half-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barcode-fill"></use>
                </svg>
                <div class="name">barcode-fill</div>
                <div class="code-name">#icon-barcode-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notification-badge-line"></use>
                </svg>
                <div class="name">notification-badge-line</div>
                <div class="code-name">#icon-notification-badge-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notification-badge-fill"></use>
                </svg>
                <div class="name">notification-badge-fill</div>
                <div class="code-name">#icon-notification-badge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-base-station-fill"></use>
                </svg>
                <div class="name">base-station-fill</div>
                <div class="code-name">#icon-base-station-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-box-fill"></use>
                </svg>
                <div class="name">add-box-fill</div>
                <div class="code-name">#icon-add-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-warning-fill"></use>
                </svg>
                <div class="name">alarm-warning-fill</div>
                <div class="code-name">#icon-alarm-warning-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barcode-line"></use>
                </svg>
                <div class="name">barcode-line</div>
                <div class="code-name">#icon-barcode-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-warning-line"></use>
                </svg>
                <div class="name">alarm-warning-line</div>
                <div class="code-name">#icon-alarm-warning-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-box-line"></use>
                </svg>
                <div class="name">add-box-line</div>
                <div class="code-name">#icon-add-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-base-station-line"></use>
                </svg>
                <div class="name">base-station-line</div>
                <div class="code-name">#icon-base-station-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-circle-line"></use>
                </svg>
                <div class="name">add-circle-line</div>
                <div class="code-name">#icon-add-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-fill"></use>
                </svg>
                <div class="name">add-fill</div>
                <div class="code-name">#icon-add-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-fill"></use>
                </svg>
                <div class="name">alarm-fill</div>
                <div class="code-name">#icon-alarm-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-line"></use>
                </svg>
                <div class="name">add-line</div>
                <div class="code-name">#icon-add-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-circle-fill"></use>
                </svg>
                <div class="name">add-circle-fill</div>
                <div class="code-name">#icon-add-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-line"></use>
                </svg>
                <div class="name">alarm-line</div>
                <div class="code-name">#icon-alarm-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps--line"></use>
                </svg>
                <div class="name">apps-2-line</div>
                <div class="code-name">#icon-apps--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps--fill"></use>
                </svg>
                <div class="name">apps-2-fill</div>
                <div class="code-name">#icon-apps--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps-fill"></use>
                </svg>
                <div class="name">apps-fill</div>
                <div class="code-name">#icon-apps-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-circle-fill"></use>
                </svg>
                <div class="name">arrow-down-circle-fill</div>
                <div class="code-name">#icon-arrow-down-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apps-line"></use>
                </svg>
                <div class="name">apps-line</div>
                <div class="code-name">#icon-apps-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-circle-line"></use>
                </svg>
                <div class="name">arrow-down-circle-line</div>
                <div class="code-name">#icon-arrow-down-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-fill"></use>
                </svg>
                <div class="name">arrow-down-fill</div>
                <div class="code-name">#icon-arrow-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-line"></use>
                </svg>
                <div class="name">arrow-down-line</div>
                <div class="code-name">#icon-arrow-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-s-fill"></use>
                </svg>
                <div class="name">arrow-down-s-fill</div>
                <div class="code-name">#icon-arrow-down-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-down-fill"></use>
                </svg>
                <div class="name">arrow-drop-down-fill</div>
                <div class="code-name">#icon-arrow-drop-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-down-line"></use>
                </svg>
                <div class="name">arrow-drop-down-line</div>
                <div class="code-name">#icon-arrow-drop-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-left-fill"></use>
                </svg>
                <div class="name">arrow-drop-left-fill</div>
                <div class="code-name">#icon-arrow-drop-left-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-s-line"></use>
                </svg>
                <div class="name">arrow-down-s-line</div>
                <div class="code-name">#icon-arrow-down-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-left-line"></use>
                </svg>
                <div class="name">arrow-drop-left-line</div>
                <div class="code-name">#icon-arrow-drop-left-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-right-fill"></use>
                </svg>
                <div class="name">arrow-drop-right-fill</div>
                <div class="code-name">#icon-arrow-drop-right-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-up-fill"></use>
                </svg>
                <div class="name">arrow-drop-up-fill</div>
                <div class="code-name">#icon-arrow-drop-up-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-right-line"></use>
                </svg>
                <div class="name">arrow-drop-right-line</div>
                <div class="code-name">#icon-arrow-drop-right-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-go-back-line"></use>
                </svg>
                <div class="name">arrow-go-back-line</div>
                <div class="code-name">#icon-arrow-go-back-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-drop-up-line"></use>
                </svg>
                <div class="name">arrow-drop-up-line</div>
                <div class="code-name">#icon-arrow-drop-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-go-back-fill"></use>
                </svg>
                <div class="name">arrow-go-back-fill</div>
                <div class="code-name">#icon-arrow-go-back-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-go-forward-fill"></use>
                </svg>
                <div class="name">arrow-go-forward-fill</div>
                <div class="code-name">#icon-arrow-go-forward-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-circle-fill"></use>
                </svg>
                <div class="name">arrow-left-circle-fill</div>
                <div class="code-name">#icon-arrow-left-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-circle-line"></use>
                </svg>
                <div class="name">arrow-left-circle-line</div>
                <div class="code-name">#icon-arrow-left-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-go-forward-line"></use>
                </svg>
                <div class="name">arrow-go-forward-line</div>
                <div class="code-name">#icon-arrow-go-forward-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-down-line"></use>
                </svg>
                <div class="name">arrow-left-down-line</div>
                <div class="code-name">#icon-arrow-left-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-fill"></use>
                </svg>
                <div class="name">arrow-left-fill</div>
                <div class="code-name">#icon-arrow-left-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-down-fill"></use>
                </svg>
                <div class="name">arrow-left-down-fill</div>
                <div class="code-name">#icon-arrow-left-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-line"></use>
                </svg>
                <div class="name">arrow-left-line</div>
                <div class="code-name">#icon-arrow-left-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-s-fill"></use>
                </svg>
                <div class="name">arrow-left-s-fill</div>
                <div class="code-name">#icon-arrow-left-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-up-line"></use>
                </svg>
                <div class="name">arrow-left-up-line</div>
                <div class="code-name">#icon-arrow-left-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-circle-fill"></use>
                </svg>
                <div class="name">arrow-right-circle-fill</div>
                <div class="code-name">#icon-arrow-right-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-up-fill"></use>
                </svg>
                <div class="name">arrow-left-up-fill</div>
                <div class="code-name">#icon-arrow-left-up-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-s-line"></use>
                </svg>
                <div class="name">arrow-left-s-line</div>
                <div class="code-name">#icon-arrow-left-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-down-fill"></use>
                </svg>
                <div class="name">arrow-right-down-fill</div>
                <div class="code-name">#icon-arrow-right-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-circle-line"></use>
                </svg>
                <div class="name">arrow-right-circle-line</div>
                <div class="code-name">#icon-arrow-right-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-down-line"></use>
                </svg>
                <div class="name">arrow-right-down-line</div>
                <div class="code-name">#icon-arrow-right-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-line"></use>
                </svg>
                <div class="name">arrow-right-line</div>
                <div class="code-name">#icon-arrow-right-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-fill"></use>
                </svg>
                <div class="name">arrow-right-fill</div>
                <div class="code-name">#icon-arrow-right-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-s-fill"></use>
                </svg>
                <div class="name">arrow-right-s-fill</div>
                <div class="code-name">#icon-arrow-right-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-s-line"></use>
                </svg>
                <div class="name">arrow-right-s-line</div>
                <div class="code-name">#icon-arrow-right-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-up-fill"></use>
                </svg>
                <div class="name">arrow-right-up-fill</div>
                <div class="code-name">#icon-arrow-right-up-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-up-line"></use>
                </svg>
                <div class="name">arrow-right-up-line</div>
                <div class="code-name">#icon-arrow-right-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-fill"></use>
                </svg>
                <div class="name">arrow-up-fill</div>
                <div class="code-name">#icon-arrow-up-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-circle-line"></use>
                </svg>
                <div class="name">arrow-up-circle-line</div>
                <div class="code-name">#icon-arrow-up-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-s-fill"></use>
                </svg>
                <div class="name">arrow-up-s-fill</div>
                <div class="code-name">#icon-arrow-up-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-line"></use>
                </svg>
                <div class="name">arrow-up-line</div>
                <div class="code-name">#icon-arrow-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-circle-fill"></use>
                </svg>
                <div class="name">arrow-up-circle-fill</div>
                <div class="code-name">#icon-arrow-up-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-s-line"></use>
                </svg>
                <div class="name">arrow-up-s-line</div>
                <div class="code-name">#icon-arrow-up-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-fill"></use>
                </svg>
                <div class="name">bluetooth-fill</div>
                <div class="code-name">#icon-bluetooth-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-fill"></use>
                </svg>
                <div class="name">check-fill</div>
                <div class="code-name">#icon-check-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-line"></use>
                </svg>
                <div class="name">check-line</div>
                <div class="code-name">#icon-check-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-connect-line"></use>
                </svg>
                <div class="name">bluetooth-connect-line</div>
                <div class="code-name">#icon-bluetooth-connect-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-connect-fill"></use>
                </svg>
                <div class="name">bluetooth-connect-fill</div>
                <div class="code-name">#icon-bluetooth-connect-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetooth-line"></use>
                </svg>
                <div class="name">bluetooth-line</div>
                <div class="code-name">#icon-bluetooth-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-blank-circle-line"></use>
                </svg>
                <div class="name">checkbox-blank-circle-line</div>
                <div class="code-name">#icon-checkbox-blank-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-blank-fill"></use>
                </svg>
                <div class="name">checkbox-blank-fill</div>
                <div class="code-name">#icon-checkbox-blank-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-blank-circle-fill"></use>
                </svg>
                <div class="name">checkbox-blank-circle-fill</div>
                <div class="code-name">#icon-checkbox-blank-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-blank-line"></use>
                </svg>
                <div class="name">checkbox-blank-line</div>
                <div class="code-name">#icon-checkbox-blank-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-circle-fill"></use>
                </svg>
                <div class="name">checkbox-circle-fill</div>
                <div class="code-name">#icon-checkbox-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-indeterminate-fill"></use>
                </svg>
                <div class="name">checkbox-indeterminate-fill</div>
                <div class="code-name">#icon-checkbox-indeterminate-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-indeterminate-line"></use>
                </svg>
                <div class="name">checkbox-indeterminate-line</div>
                <div class="code-name">#icon-checkbox-indeterminate-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-circle-line"></use>
                </svg>
                <div class="name">checkbox-circle-line</div>
                <div class="code-name">#icon-checkbox-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle-fill"></use>
                </svg>
                <div class="name">close-circle-fill</div>
                <div class="code-name">#icon-close-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-line"></use>
                </svg>
                <div class="name">checkbox-line</div>
                <div class="code-name">#icon-checkbox-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle-line"></use>
                </svg>
                <div class="name">close-circle-line</div>
                <div class="code-name">#icon-close-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-line"></use>
                </svg>
                <div class="name">close-line</div>
                <div class="code-name">#icon-close-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dashboard-fill"></use>
                </svg>
                <div class="name">dashboard-fill</div>
                <div class="code-name">#icon-dashboard-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-fill"></use>
                </svg>
                <div class="name">close-fill</div>
                <div class="code-name">#icon-close-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dashboard-line"></use>
                </svg>
                <div class="name">dashboard-line</div>
                <div class="code-name">#icon-dashboard-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-back--fill"></use>
                </svg>
                <div class="name">delete-back-2-fill</div>
                <div class="code-name">#icon-delete-back--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkbox-fill"></use>
                </svg>
                <div class="name">checkbox-fill</div>
                <div class="code-name">#icon-checkbox-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-back-fill"></use>
                </svg>
                <div class="name">delete-back-fill</div>
                <div class="code-name">#icon-delete-back-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-back-line"></use>
                </svg>
                <div class="name">delete-back-line</div>
                <div class="code-name">#icon-delete-back-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-back--line"></use>
                </svg>
                <div class="name">delete-back-2-line</div>
                <div class="code-name">#icon-delete-back--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill"></use>
                </svg>
                <div class="name">delete-bin-2-fill</div>
                <div class="code-name">#icon-delete-bin--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line"></use>
                </svg>
                <div class="name">delete-bin-2-line</div>
                <div class="code-name">#icon-delete-bin--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill1"></use>
                </svg>
                <div class="name">delete-bin-3-fill</div>
                <div class="code-name">#icon-delete-bin--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line1"></use>
                </svg>
                <div class="name">delete-bin-3-line</div>
                <div class="code-name">#icon-delete-bin--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line2"></use>
                </svg>
                <div class="name">delete-bin-6-line</div>
                <div class="code-name">#icon-delete-bin--line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line3"></use>
                </svg>
                <div class="name">delete-bin-4-line</div>
                <div class="code-name">#icon-delete-bin--line3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line4"></use>
                </svg>
                <div class="name">delete-bin-5-line</div>
                <div class="code-name">#icon-delete-bin--line4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill2"></use>
                </svg>
                <div class="name">delete-bin-4-fill</div>
                <div class="code-name">#icon-delete-bin--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill3"></use>
                </svg>
                <div class="name">delete-bin-6-fill</div>
                <div class="code-name">#icon-delete-bin--fill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin-fill"></use>
                </svg>
                <div class="name">delete-bin-fill</div>
                <div class="code-name">#icon-delete-bin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill4"></use>
                </svg>
                <div class="name">delete-bin-7-fill</div>
                <div class="code-name">#icon-delete-bin--fill4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-divide-fill"></use>
                </svg>
                <div class="name">divide-fill</div>
                <div class="code-name">#icon-divide-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download--line"></use>
                </svg>
                <div class="name">download-2-line</div>
                <div class="code-name">#icon-download--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-divide-line"></use>
                </svg>
                <div class="name">divide-line</div>
                <div class="code-name">#icon-divide-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-cloud-fill"></use>
                </svg>
                <div class="name">download-cloud-fill</div>
                <div class="code-name">#icon-download-cloud-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin-line"></use>
                </svg>
                <div class="name">delete-bin-line</div>
                <div class="code-name">#icon-delete-bin-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--line5"></use>
                </svg>
                <div class="name">delete-bin-7-line</div>
                <div class="code-name">#icon-delete-bin--line5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download--fill"></use>
                </svg>
                <div class="name">download-2-fill</div>
                <div class="code-name">#icon-download--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-fill"></use>
                </svg>
                <div class="name">download-fill</div>
                <div class="code-name">#icon-download-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-line"></use>
                </svg>
                <div class="name">download-line</div>
                <div class="code-name">#icon-download-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error-warning-fill"></use>
                </svg>
                <div class="name">error-warning-fill</div>
                <div class="code-name">#icon-error-warning-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download-cloud-line"></use>
                </svg>
                <div class="name">download-cloud-line</div>
                <div class="code-name">#icon-download-cloud-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error-warning-line"></use>
                </svg>
                <div class="name">error-warning-line</div>
                <div class="code-name">#icon-error-warning-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-fill"></use>
                </svg>
                <div class="name">eye-fill</div>
                <div class="code-name">#icon-eye-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-close-fill"></use>
                </svg>
                <div class="name">eye-close-fill</div>
                <div class="code-name">#icon-eye-close-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-line"></use>
                </svg>
                <div class="name">eye-line</div>
                <div class="code-name">#icon-eye-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-off-fill"></use>
                </svg>
                <div class="name">eye-off-fill</div>
                <div class="code-name">#icon-eye-off-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-close-line"></use>
                </svg>
                <div class="name">eye-close-line</div>
                <div class="code-name">#icon-eye-close-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-find-replace-fill"></use>
                </svg>
                <div class="name">find-replace-fill</div>
                <div class="code-name">#icon-find-replace-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-bin--fill5"></use>
                </svg>
                <div class="name">delete-bin-5-fill</div>
                <div class="code-name">#icon-delete-bin--fill5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-off-line"></use>
                </svg>
                <div class="name">eye-off-line</div>
                <div class="code-name">#icon-eye-off-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-forbid--fill"></use>
                </svg>
                <div class="name">forbid-2-fill</div>
                <div class="code-name">#icon-forbid--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-find-replace-line"></use>
                </svg>
                <div class="name">find-replace-line</div>
                <div class="code-name">#icon-find-replace-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-forbid--line"></use>
                </svg>
                <div class="name">forbid-2-line</div>
                <div class="code-name">#icon-forbid--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-function-fill"></use>
                </svg>
                <div class="name">function-fill</div>
                <div class="code-name">#icon-function-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-forbid-fill"></use>
                </svg>
                <div class="name">forbid-fill</div>
                <div class="code-name">#icon-forbid-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gps-line"></use>
                </svg>
                <div class="name">gps-line</div>
                <div class="code-name">#icon-gps-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-forbid-line"></use>
                </svg>
                <div class="name">forbid-line</div>
                <div class="code-name">#icon-forbid-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart--line"></use>
                </svg>
                <div class="name">heart-2-line</div>
                <div class="code-name">#icon-heart--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gps-fill"></use>
                </svg>
                <div class="name">gps-fill</div>
                <div class="code-name">#icon-gps-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-function-line"></use>
                </svg>
                <div class="name">function-line</div>
                <div class="code-name">#icon-function-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-indeterminate-circle-fill"></use>
                </svg>
                <div class="name">indeterminate-circle-fill</div>
                <div class="code-name">#icon-indeterminate-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-fill"></use>
                </svg>
                <div class="name">heart-fill</div>
                <div class="code-name">#icon-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-information-fill"></use>
                </svg>
                <div class="name">information-fill</div>
                <div class="code-name">#icon-information-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart--fill"></use>
                </svg>
                <div class="name">heart-2-fill</div>
                <div class="code-name">#icon-heart--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-line"></use>
                </svg>
                <div class="name">heart-line</div>
                <div class="code-name">#icon-heart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-information-line"></use>
                </svg>
                <div class="name">information-line</div>
                <div class="code-name">#icon-information-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock--fill"></use>
                </svg>
                <div class="name">lock-2-fill</div>
                <div class="code-name">#icon-lock--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-password-fill"></use>
                </svg>
                <div class="name">lock-password-fill</div>
                <div class="code-name">#icon-lock-password-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-line"></use>
                </svg>
                <div class="name">lock-line</div>
                <div class="code-name">#icon-lock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-fill"></use>
                </svg>
                <div class="name">lock-fill</div>
                <div class="code-name">#icon-lock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock--line"></use>
                </svg>
                <div class="name">lock-2-line</div>
                <div class="code-name">#icon-lock--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-settings-line"></use>
                </svg>
                <div class="name">list-settings-line</div>
                <div class="code-name">#icon-list-settings-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-password-line"></use>
                </svg>
                <div class="name">lock-password-line</div>
                <div class="code-name">#icon-lock-password-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-login-box-line"></use>
                </svg>
                <div class="name">login-box-line</div>
                <div class="code-name">#icon-login-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-login-circle-line"></use>
                </svg>
                <div class="name">login-circle-line</div>
                <div class="code-name">#icon-login-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-indeterminate-circle-line"></use>
                </svg>
                <div class="name">indeterminate-circle-line</div>
                <div class="code-name">#icon-indeterminate-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-circle-line"></use>
                </svg>
                <div class="name">logout-circle-line</div>
                <div class="code-name">#icon-logout-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu--line"></use>
                </svg>
                <div class="name">menu-3-line</div>
                <div class="code-name">#icon-menu--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu--line1"></use>
                </svg>
                <div class="name">menu-2-line</div>
                <div class="code-name">#icon-menu--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu--fill"></use>
                </svg>
                <div class="name">menu-3-fill</div>
                <div class="code-name">#icon-menu--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu--fill1"></use>
                </svg>
                <div class="name">menu-2-fill</div>
                <div class="code-name">#icon-menu--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-unlock-fill"></use>
                </svg>
                <div class="name">lock-unlock-fill</div>
                <div class="code-name">#icon-lock-unlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-settings-fill"></use>
                </svg>
                <div class="name">list-settings-fill</div>
                <div class="code-name">#icon-list-settings-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-login-box-fill"></use>
                </svg>
                <div class="name">login-box-fill</div>
                <div class="code-name">#icon-login-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-unlock-line"></use>
                </svg>
                <div class="name">lock-unlock-line</div>
                <div class="code-name">#icon-lock-unlock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-login-circle-fill"></use>
                </svg>
                <div class="name">login-circle-fill</div>
                <div class="code-name">#icon-login-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-line"></use>
                </svg>
                <div class="name">menu-line</div>
                <div class="code-name">#icon-menu-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu-fill"></use>
                </svg>
                <div class="name">menu-fill</div>
                <div class="code-name">#icon-menu-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more--fill"></use>
                </svg>
                <div class="name">more-2-fill</div>
                <div class="code-name">#icon-more--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-box-line"></use>
                </svg>
                <div class="name">logout-box-line</div>
                <div class="code-name">#icon-logout-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more--line"></use>
                </svg>
                <div class="name">more-2-line</div>
                <div class="code-name">#icon-more--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-circle-fill"></use>
                </svg>
                <div class="name">logout-circle-fill</div>
                <div class="code-name">#icon-logout-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-scan--fill"></use>
                </svg>
                <div class="name">qr-scan-2-fill</div>
                <div class="code-name">#icon-qr-scan--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-scan--line"></use>
                </svg>
                <div class="name">qr-scan-2-line</div>
                <div class="code-name">#icon-qr-scan--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-code-fill"></use>
                </svg>
                <div class="name">qr-code-fill</div>
                <div class="code-name">#icon-qr-code-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-fill"></use>
                </svg>
                <div class="name">more-fill</div>
                <div class="code-name">#icon-more-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-line"></use>
                </svg>
                <div class="name">more-line</div>
                <div class="code-name">#icon-more-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-code-line"></use>
                </svg>
                <div class="name">qr-code-line</div>
                <div class="code-name">#icon-qr-code-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout-box-fill"></use>
                </svg>
                <div class="name">logout-box-fill</div>
                <div class="code-name">#icon-logout-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill"></use>
                </svg>
                <div class="name">settings-2-fill</div>
                <div class="code-name">#icon-settings--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-line"></use>
                </svg>
                <div class="name">search-line</div>
                <div class="code-name">#icon-search-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line"></use>
                </svg>
                <div class="name">settings-2-line</div>
                <div class="code-name">#icon-settings--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill1"></use>
                </svg>
                <div class="name">settings-3-fill</div>
                <div class="code-name">#icon-settings--fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line1"></use>
                </svg>
                <div class="name">settings-3-line</div>
                <div class="code-name">#icon-settings--line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line2"></use>
                </svg>
                <div class="name">settings-4-line</div>
                <div class="code-name">#icon-settings--line2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill2"></use>
                </svg>
                <div class="name">settings-5-fill</div>
                <div class="code-name">#icon-settings--fill2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill3"></use>
                </svg>
                <div class="name">settings-4-fill</div>
                <div class="code-name">#icon-settings--fill3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--fill4"></use>
                </svg>
                <div class="name">settings-6-fill</div>
                <div class="code-name">#icon-settings--fill4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-scan-line"></use>
                </svg>
                <div class="name">qr-scan-line</div>
                <div class="code-name">#icon-qr-scan-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line3"></use>
                </svg>
                <div class="name">settings-6-line</div>
                <div class="code-name">#icon-settings--line3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qr-scan-fill"></use>
                </svg>
                <div class="name">qr-scan-fill</div>
                <div class="code-name">#icon-qr-scan-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-fill"></use>
                </svg>
                <div class="name">settings-fill</div>
                <div class="code-name">#icon-settings-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-fill"></use>
                </svg>
                <div class="name">question-fill</div>
                <div class="code-name">#icon-question-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-line"></use>
                </svg>
                <div class="name">question-line</div>
                <div class="code-name">#icon-question-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-fill"></use>
                </svg>
                <div class="name">refresh-fill</div>
                <div class="code-name">#icon-refresh-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio-button-fill"></use>
                </svg>
                <div class="name">radio-button-fill</div>
                <div class="code-name">#icon-radio-button-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-line"></use>
                </svg>
                <div class="name">refresh-line</div>
                <div class="code-name">#icon-refresh-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings--line4"></use>
                </svg>
                <div class="name">settings-5-line</div>
                <div class="code-name">#icon-settings--line4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restart-fill"></use>
                </svg>
                <div class="name">restart-fill</div>
                <div class="code-name">#icon-restart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rss-fill"></use>
                </svg>
                <div class="name">rss-fill</div>
                <div class="code-name">#icon-rss-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-restart-line"></use>
                </svg>
                <div class="name">restart-line</div>
                <div class="code-name">#icon-restart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radio-button-line"></use>
                </svg>
                <div class="name">radio-button-line</div>
                <div class="code-name">#icon-radio-button-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rss-line"></use>
                </svg>
                <div class="name">rss-line</div>
                <div class="code-name">#icon-rss-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan-fill"></use>
                </svg>
                <div class="name">scan-fill</div>
                <div class="code-name">#icon-scan-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan--line"></use>
                </svg>
                <div class="name">scan-2-line</div>
                <div class="code-name">#icon-scan--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan-line"></use>
                </svg>
                <div class="name">scan-line</div>
                <div class="code-name">#icon-scan-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search--fill"></use>
                </svg>
                <div class="name">search-2-fill</div>
                <div class="code-name">#icon-search--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search--line"></use>
                </svg>
                <div class="name">search-2-line</div>
                <div class="code-name">#icon-search--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-fill"></use>
                </svg>
                <div class="name">search-fill</div>
                <div class="code-name">#icon-search-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-eye-fill"></use>
                </svg>
                <div class="name">search-eye-fill</div>
                <div class="code-name">#icon-search-eye-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search-eye-line"></use>
                </svg>
                <div class="name">search-eye-line</div>
                <div class="code-name">#icon-search-eye-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings-line"></use>
                </svg>
                <div class="name">settings-line</div>
                <div class="code-name">#icon-settings-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-side-bar-line"></use>
                </svg>
                <div class="name">side-bar-line</div>
                <div class="code-name">#icon-side-bar-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-fill"></use>
                </svg>
                <div class="name">star-fill</div>
                <div class="code-name">#icon-star-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan--fill"></use>
                </svg>
                <div class="name">scan-2-fill</div>
                <div class="code-name">#icon-scan--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-subtract-line"></use>
                </svg>
                <div class="name">subtract-line</div>
                <div class="code-name">#icon-subtract-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-subtract-fill"></use>
                </svg>
                <div class="name">subtract-fill</div>
                <div class="code-name">#icon-subtract-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-fill"></use>
                </svg>
                <div class="name">thumb-down-fill</div>
                <div class="code-name">#icon-thumb-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-down-line"></use>
                </svg>
                <div class="name">thumb-down-line</div>
                <div class="code-name">#icon-thumb-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time-line"></use>
                </svg>
                <div class="name">time-line</div>
                <div class="code-name">#icon-time-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer--fill"></use>
                </svg>
                <div class="name">timer-2-fill</div>
                <div class="code-name">#icon-timer--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-box-fill"></use>
                </svg>
                <div class="name">share-box-fill</div>
                <div class="code-name">#icon-share-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-box-line"></use>
                </svg>
                <div class="name">share-box-line</div>
                <div class="code-name">#icon-share-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward--line"></use>
                </svg>
                <div class="name">share-forward-2-line</div>
                <div class="code-name">#icon-share-forward--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward--fill"></use>
                </svg>
                <div class="name">share-forward-2-fill</div>
                <div class="code-name">#icon-share-forward--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-fill"></use>
                </svg>
                <div class="name">share-fill</div>
                <div class="code-name">#icon-share-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-circle-fill"></use>
                </svg>
                <div class="name">share-circle-fill</div>
                <div class="code-name">#icon-share-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward-fill"></use>
                </svg>
                <div class="name">share-forward-fill</div>
                <div class="code-name">#icon-share-forward-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward-box-line"></use>
                </svg>
                <div class="name">share-forward-box-line</div>
                <div class="code-name">#icon-share-forward-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-line"></use>
                </svg>
                <div class="name">share-line</div>
                <div class="code-name">#icon-share-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward-line"></use>
                </svg>
                <div class="name">share-forward-line</div>
                <div class="code-name">#icon-share-forward-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-cross-line"></use>
                </svg>
                <div class="name">shield-cross-line</div>
                <div class="code-name">#icon-shield-cross-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-flash-line"></use>
                </svg>
                <div class="name">shield-flash-line</div>
                <div class="code-name">#icon-shield-flash-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-line"></use>
                </svg>
                <div class="name">shield-line</div>
                <div class="code-name">#icon-shield-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shut-down-fill"></use>
                </svg>
                <div class="name">shut-down-fill</div>
                <div class="code-name">#icon-shut-down-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shut-down-line"></use>
                </svg>
                <div class="name">shut-down-line</div>
                <div class="code-name">#icon-shut-down-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-side-bar-fill"></use>
                </svg>
                <div class="name">side-bar-fill</div>
                <div class="code-name">#icon-side-bar-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload--fill"></use>
                </svg>
                <div class="name">upload-2-fill</div>
                <div class="code-name">#icon-upload--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-cloud-fill"></use>
                </svg>
                <div class="name">upload-cloud-fill</div>
                <div class="code-name">#icon-upload-cloud-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-cloud-line"></use>
                </svg>
                <div class="name">upload-cloud-line</div>
                <div class="code-name">#icon-upload-cloud-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-line"></use>
                </svg>
                <div class="name">timer-line</div>
                <div class="code-name">#icon-timer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-line"></use>
                </svg>
                <div class="name">upload-line</div>
                <div class="code-name">#icon-upload-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-fill"></use>
                </svg>
                <div class="name">upload-fill</div>
                <div class="code-name">#icon-upload-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-line"></use>
                </svg>
                <div class="name">wifi-line</div>
                <div class="code-name">#icon-wifi-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out-fill"></use>
                </svg>
                <div class="name">zoom-out-fill</div>
                <div class="code-name">#icon-zoom-out-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out-line"></use>
                </svg>
                <div class="name">zoom-out-line</div>
                <div class="code-name">#icon-zoom-out-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-s-fill"></use>
                </svg>
                <div class="name">star-s-fill</div>
                <div class="code-name">#icon-star-s-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-fill"></use>
                </svg>
                <div class="name">thumb-up-fill</div>
                <div class="code-name">#icon-thumb-up-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-s-line"></use>
                </svg>
                <div class="name">star-s-line</div>
                <div class="code-name">#icon-star-s-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-fill"></use>
                </svg>
                <div class="name">shield-fill</div>
                <div class="code-name">#icon-shield-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time-fill"></use>
                </svg>
                <div class="name">time-fill</div>
                <div class="code-name">#icon-time-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer--line"></use>
                </svg>
                <div class="name">timer-2-line</div>
                <div class="code-name">#icon-timer--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-cross-fill"></use>
                </svg>
                <div class="name">shield-cross-fill</div>
                <div class="code-name">#icon-shield-cross-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shield-flash-fill"></use>
                </svg>
                <div class="name">shield-flash-fill</div>
                <div class="code-name">#icon-shield-flash-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-circle-line"></use>
                </svg>
                <div class="name">share-circle-line</div>
                <div class="code-name">#icon-share-circle-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifi-fill"></use>
                </svg>
                <div class="name">wifi-fill</div>
                <div class="code-name">#icon-wifi-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer-fill"></use>
                </svg>
                <div class="name">timer-fill</div>
                <div class="code-name">#icon-timer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in-fill"></use>
                </svg>
                <div class="name">zoom-in-fill</div>
                <div class="code-name">#icon-zoom-in-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in-line"></use>
                </svg>
                <div class="name">zoom-in-line</div>
                <div class="code-name">#icon-zoom-in-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-forward-box-fill"></use>
                </svg>
                <div class="name">share-forward-box-fill</div>
                <div class="code-name">#icon-share-forward-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-line"></use>
                </svg>
                <div class="name">star-line</div>
                <div class="code-name">#icon-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb-up-line"></use>
                </svg>
                <div class="name">thumb-up-line</div>
                <div class="code-name">#icon-thumb-up-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload--line"></use>
                </svg>
                <div class="name">upload-2-line</div>
                <div class="code-name">#icon-upload--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-check-line"></use>
                </svg>
                <div class="name">calendar-check-line</div>
                <div class="code-name">#icon-calendar-check-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-check-fill"></use>
                </svg>
                <div class="name">calendar-check-fill</div>
                <div class="code-name">#icon-calendar-check-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloud-off-fill"></use>
                </svg>
                <div class="name">cloud-off-fill</div>
                <div class="code-name">#icon-cloud-off-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloud-off-line"></use>
                </svg>
                <div class="name">cloud-off-line</div>
                <div class="code-name">#icon-cloud-off-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-horizontal-line"></use>
                </svg>
                <div class="name">bar-chart-horizontal-line</div>
                <div class="code-name">#icon-bar-chart-horizontal-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-grouped-line"></use>
                </svg>
                <div class="name">bar-chart-grouped-line</div>
                <div class="code-name">#icon-bar-chart-grouped-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-grouped-fill"></use>
                </svg>
                <div class="name">bar-chart-grouped-fill</div>
                <div class="code-name">#icon-bar-chart-grouped-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-add-line"></use>
                </svg>
                <div class="name">mail-add-line</div>
                <div class="code-name">#icon-mail-add-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-horizontal-fill"></use>
                </svg>
                <div class="name">bar-chart-horizontal-fill</div>
                <div class="code-name">#icon-bar-chart-horizontal-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-add-fill"></use>
                </svg>
                <div class="name">mail-add-fill</div>
                <div class="code-name">#icon-mail-add-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-check-fill"></use>
                </svg>
                <div class="name">mail-check-fill</div>
                <div class="code-name">#icon-mail-check-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-check-line"></use>
                </svg>
                <div class="name">mail-check-line</div>
                <div class="code-name">#icon-mail-check-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-close-fill"></use>
                </svg>
                <div class="name">mail-close-fill</div>
                <div class="code-name">#icon-mail-close-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-close-line"></use>
                </svg>
                <div class="name">mail-close-line</div>
                <div class="code-name">#icon-mail-close-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-download-fill"></use>
                </svg>
                <div class="name">mail-download-fill</div>
                <div class="code-name">#icon-mail-download-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-download-line"></use>
                </svg>
                <div class="name">mail-download-line</div>
                <div class="code-name">#icon-mail-download-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-forbid-line"></use>
                </svg>
                <div class="name">mail-forbid-line</div>
                <div class="code-name">#icon-mail-forbid-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-forbid-fill"></use>
                </svg>
                <div class="name">mail-forbid-fill</div>
                <div class="code-name">#icon-mail-forbid-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-lock-fill"></use>
                </svg>
                <div class="name">mail-lock-fill</div>
                <div class="code-name">#icon-mail-lock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-lock-line"></use>
                </svg>
                <div class="name">mail-lock-line</div>
                <div class="code-name">#icon-mail-lock-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-star-fill"></use>
                </svg>
                <div class="name">mail-star-fill</div>
                <div class="code-name">#icon-mail-star-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-star-line"></use>
                </svg>
                <div class="name">mail-star-line</div>
                <div class="code-name">#icon-mail-star-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-settings-fill"></use>
                </svg>
                <div class="name">mail-settings-fill</div>
                <div class="code-name">#icon-mail-settings-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-archive-drawer-line"></use>
                </svg>
                <div class="name">archive-drawer-line</div>
                <div class="code-name">#icon-archive-drawer-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-at-fill"></use>
                </svg>
                <div class="name">at-fill</div>
                <div class="code-name">#icon-at-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-archive-drawer-fill"></use>
                </svg>
                <div class="name">archive-drawer-fill</div>
                <div class="code-name">#icon-archive-drawer-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attachment-line"></use>
                </svg>
                <div class="name">attachment-line</div>
                <div class="code-name">#icon-attachment-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-archive-fill"></use>
                </svg>
                <div class="name">archive-fill</div>
                <div class="code-name">#icon-archive-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail-settings-line"></use>
                </svg>
                <div class="name">mail-settings-line</div>
                <div class="code-name">#icon-mail-settings-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-at-line"></use>
                </svg>
                <div class="name">at-line</div>
                <div class="code-name">#icon-at-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart--fill"></use>
                </svg>
                <div class="name">bar-chart-2-fill</div>
                <div class="code-name">#icon-bar-chart--fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-award-fill"></use>
                </svg>
                <div class="name">award-fill</div>
                <div class="code-name">#icon-award-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart--line"></use>
                </svg>
                <div class="name">bar-chart-2-line</div>
                <div class="code-name">#icon-bar-chart--line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-box-line"></use>
                </svg>
                <div class="name">bar-chart-box-line</div>
                <div class="code-name">#icon-bar-chart-box-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart-fill"></use>
                </svg>
                <div class="name">bar-chart-fill</div>
                <div class="code-name">#icon-bar-chart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attachment-fill"></use>
                </svg>
                <div class="name">attachment-fill</div>
                <div class="code-name">#icon-attachment-fill</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./layui-icon.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
